tuonioooo
tuonioooo
  • 发布:2021-12-16 11:14
  • 更新:2023-03-13 15:22
  • 阅读:2360

uni-app 如何 自定义页面右侧滚动条的样式 以及隐藏滚动条的样式呀

分类:uni-app

uni-app 如何 自定义页面右侧滚动条的样式 以及隐藏滚动条的样式呀 我看了一下官方文档中提到的

pages 单页面 中配置

{  
            "path": "pages/virtual/index",  
            "style": {  
                **"app-plus": {  
                    "scrollIndicator": "none"  
                }**  
            }  
},

以及全局样式中配置 以下例子摘抄 来自于 hello-uni 官方实例中的配置 环境都是官方默认的

"globalStyle": {  
        "pageOrientation": "portrait",  
        "navigationBarTitleText": "Hello uniapp",  
        "navigationBarTextStyle": "white",  
        "navigationBarBackgroundColor": "#007AFF",  
        "backgroundColor": "#F8F8F8",  
        "backgroundColorTop": "#F4F5F6",  
        "backgroundColorBottom": "#F4F5F6",  
        **"app-plus": {  
            "scrollIndicator": "none"  
        },**  
        "mp-360": {  
            "navigationStyle": "custom"  
        },  
        "h5": {  
            "maxWidth": 1190,  
            "navigationBarTextStyle": "black",  
            "navigationBarBackgroundColor": "#F1F1F1"  
        }  

    },

但是二者完全无效果 ,导致我自定义页面滚动条 无从下手

原先我在自己的Vue项目中 采用的方案是 如下

::-webkit-scrollbar {  
      width: 10px !important;  
      height: 1px !important;  
}  
::-webkit-scrollbar-thumb { //滑块部分  
      border-radius: 5px !important;  
      background-color: rgb(175, 74, 240) !important;  
}  
::-webkit-scrollbar-track { //轨道部分  
      box-shadow: inset 0 0 5px rgba(0,0,0,0.2) !important;  
      background: #ededed !important;  
      border-radius: 5px !important;  
}

这样配置到App.vue就可以达到全局的配置效果 如果是 某一个页面 前面加上指定的类名即可

但是加在pages文件夹定义的.vue 中毫无效果, 使我很是费解 ,敢问 官方 大神们 此 题 有解决方案 么 ? 希望官方能回复一下我谢谢!! 再次预祝各位小伙伴们 年后都入 百万

2021-12-16 11:14 负责人:无 分享
已邀请:
观看量1M

观看量1M

现在搞定了吗?我的也是个别页面需要设置滚动条,但在app.vue里修改所有页面样式都会变,是在每个页面里设置又不会生效。有点难搞

gao_nice

gao_nice

"scrollIndicator": "none"
没有效果

要回复问题请先登录注册