首页
   /       /   
uniapp中如何隐藏scroll-view的滚动条
7月
1
uniapp中如何隐藏scroll-view的滚动条
作者:大彭Sir    分类: 教学教程

1.我们在使用uniapp的scroll-view组件的时候,它经常会出现滚动条,如下图所示。

2.那么我们该如何去解决呢?首先我们找到项目的App.vue文件然后在style标签里面添加如下代码,这样一来,可以根据不同平台控制不同标签的属性。

<style>
    /*每个页面公共css */
    /* 解决小程序和app滚动条的问题 */
    /* #ifdef MP-WEIXIN || APP-PLUS */
        ::-webkit-scrollbar {
            display: none;
            width: 0 !important;
            height: 0 !important;
            -webkit-appearance: none;
            background: transparent;
            color: transparent;
          }
    /* #endif */

    /* 解决H5 的问题 */
    /* #ifdef H5 */
        uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
            /* 隐藏滚动条,但依旧具备可以滚动的功能 */
            display: none;
            width: 0 !important;
            height: 0 !important;
            -webkit-appearance: none;
            background: transparent;
            color: transparent;
        }
    /* #endif */
</style>
本文标签:标签: VUE uni-app
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录