uniapp中如何隐藏 scroll-view 的滚动条

1.找到项目的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>

2.我们还可以在App.vue的style里面添加如下代码 这种办法可以控制所有的滚动条。

::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
  }

你可能感兴趣的:(开发时遇到的bug+解决方法,uni-app,javascript,vue.js)