在uniapp中隐藏scroll-view的滚动条,可以通过设置scroll-view组件的scroll-y(或scroll-x)属性,并结合一些CSS样式来实现。以下是具体的步骤和示例代码: 1. 设置scroll-view组件的滚动方向 首先,确保你已经为scroll-view组件设置了滚动方向,比如scroll-y="true"表示允许垂直滚动。 html <scroll-view scroll-y="...
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "index", "app-plus": { "scrollIndicator": "none"//隐藏该页面滚动条 } } } ], "globalStyle": { "navigationBarTextSty...
找到项目的App.vue文件然后在style标签里面添加如下代码,这样一来,可以根据不同平台控制不同标签的属性。 scroll-view ::-webkit-scrollbar{display:none;width:0;height:0;color:transparent;}
1、全局隐藏滚动条,在app.vue中::-webkit-scrollbar{ display: none; }2、局部隐藏藏滚动条样式没有使用scoped属性时, 否则无效。1 2 3 .uni-scroll-view::-webkit-scrollbar { display: none }使用scoped属性时, 就要使用/deep/穿透。 1 2 3 /deep/.uni-scroll-view::-webkit-scrollbar { display: ...
}, 在App.vue的style标签里增加CSS样式 ::-webkit-scrollbar { display: none; width:0!important; height:0!important; -webkit-appearance: none; background: transparent; } 这时候一般就会隐藏了滚动条,如果还没反应,就重新编译一下,在红米K20pro上亲测消失了...
开发直播软件app时，uni-app的vue页面中，对app端scroll-view滚动条进行隐藏，通过CSS的-webkit-scrollbar进行自定义设置，实现滚动条的隐藏功能。（注意：app-nvue中无此CSS）在配置文件pages.json里，可加入相关设置。同时，在App.vue页面的style部分，进行相关代码编写，以达到滚动条隐藏效果。通过上述...
首先,我们需要在我们的项目中添加相应的 CSS 样式以隐藏滚动条。可以在 UniApp 的全局样式文件App.vue的标签中添加以下 CSS 代码: /* 隐藏滚动条的 CSS */.hide-scrollbar{overflow:-moz-scrollbars-none;/* Firefox */-ms-overflow-style:none;/* Internet Explorer 10+ */scrollbar-width:none;/* Firefo...
又看到scroll-view的滚动条竟然可以隐藏,觉得很厉害,后来发现,滚动条样式可以自己设置,设置成透明的或者直接display:none都行 这里有个注意的点,那就是滚动调样式 直接::-webkit-scrollbar改的是全局的,如果前面加类名,那就是这个类所在元素的滚动条 还有个注意的点是,如果滚动条隐藏,用display:none设置,到时候长...
uni-app的scroll-view组件的使⽤体验1.移动端隐藏scroll滚动条 //不出现滚动条 ::-webkit-scrollbar { width: 0;height: 0;background-color: transparent;} 2.使⽤这个需要注意以下⼏个⽅⾯：<scroll-view scroll-y="true" class="scroll-Y"> <view class=" scroll-view-item"> </view> <...
虽然uni-app官方文档里,scroll-view组件的滚动条是默认不显示的,但是有时候运行到移动端或者不同机型的设备时,还是会出现有滚动条。 在css样式中设置如下代码即可强制隐藏滚动条 /* 解决小程序和app滚动条的问题 *//* #ifdef MP-WEIXIN || APP-PLUS */::-webkit-scrollbar{display:none;}/* #endif *//*...