uniapp去除滚动条的方法

简介: uniapp去除滚动条的方法

第一种

在app.vue的页面中设置全局css样式属性

//第一种
  scroll-view ::-webkit-scrollbar {  
      display: none !important;  
      width: 0 !important;  
      height: 0 !important;  
      -webkit-appearance: none;  
      background: transparent;  
  }
  //第二种
  ::-webkit-scrollbar{
      display: none;
  }

第二种

在page.json设置默认属性

//第一种 这是app的不显示滚动条可以在当前页面中添加
  "app-plus":{
    "scrollIndicator":"none" //当前页面不显示滚动条
      }
      //也可以直接(不知道生效不生效,我俩种全搞上)
      "scrollIndicator": "none"
//示例代码
{
    "path": "pages/content/index",
    "style": {
      "navigationBarTitleText": "",
        "app-plus":{
        "scrollIndicator":"none" //当前页面不显示滚动条
              },
    "scrollIndicator": "none"
    }
  }
  //第二种 直接全局搞就ok  
    "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "我是王小白",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
"scrollIndicator": "none",
      "app-plus":{
          "scrollIndicator":"none" //全局 在APP页面都不显示滚动条
        }
  }

不过不知道为啥有些页面这些不起效果,小白我真的无能为力了,前端路漫漫,未进者慎重慎重!!!

相关文章
|
7月前
uniapp解决首页subNvue,hide方法关闭不了问题
uniapp解决首页subNvue,hide方法关闭不了问题
|
18天前
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
uniapp页面之间通信、传参、传值方法(父→传→子,子→传→父);获取被打开页面的数据→传→当前页面;当前页面的数据→传→被打开页面
|
16天前
|
数据处理 开发者
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
【5月更文挑战第17天】提升Uniapp开发效率的关键包括组件化、模板语法、数据处理和代码组织。通过封装组件如通用按钮,利用列表渲染生成多个元素,使用计算属性和方法处理复杂逻辑,以及采用预处理器如Sass编写样式。此外,良好的代码结构和使用开发者工具进行调试也是重要环节。掌握这些进阶技巧能帮助开发者更高效地构建高质量应用。
【Uniapp 专栏】提升 Uniapp 开发效率的进阶方法
|
17天前
|
JavaScript API
uniapp中路由拦截方法
uniapp中路由拦截方法
|
18天前
|
移动开发 小程序 API
uniapp组件库Line 线条 的适用方法
uniapp组件库Line 线条 的适用方法
18 0
|
18天前
|
移动开发 小程序 iOS开发
uniapp组件库fullScreen 压窗屏的适用方法
uniapp组件库fullScreen 压窗屏的适用方法
19 1
|
18天前
|
小程序 Android开发
uniapp进行条件编译的两种方法
uniapp进行条件编译的两种方法
41 0
|
18天前
|
JavaScript API
uniapp自定义导航栏方法
uniapp自定义导航栏方法
53 0
|
18天前
|
存储 缓存 开发框架
了解UniApp常用方法
了解UniApp常用方法
25 0
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)