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

1.我们在使用uniapp的scroll-view组件的时候，它经常会出现滚动条，如下图所示。2.那么我们该如何去解决呢？首先我们找到项目的App.vue文件然后在style标签里面添加如下代码，这样一来，可以根据不同平台控制不同标签的属性。<style>/*每个页面公共css *//* 解决小程序和app滚动条的问题 *//* #ifdef MP-WEIXIN || APP-PLUS

小小猿同学

16037人浏览 · 2022-02-13 13:08:08

小小猿同学 · 2022-02-13 13:08:08 发布

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>

3.我们还可以在App.vue的style里面外部链接base.css 这种办法可以控制所有的滚动条。

<style>
	/*每个页面公共css */
	@import url("./src/assets/css/base.css");
	
</style>

4.base.css代码如下

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