【uni-app scroll-view怎么去除滚动条】

uni-app scroll-view怎么去除滚动条

博主在写导航时发现了scroll-view的一些小坑，比如（1）scroll-view的横向滚动里view里写不了弹性布局居中，居中需要用text-align: center;height: 100rpx;line-height: 100rpx;（2）滚动条一直去不掉

方法一：
我在页面的style里写::-webkit-scrollbar{ display:none;}没有效果，后面放到app.vue的全局样式里才行

方法二：
如果就只想放在页面上，那就加个深度选择器/deep/。

<style>
	/deep/::-webkit-scrollbar {
		 display: none;
		 width: 0;
		 height: 0;
		} 
</style>

下面给大家举个小例子(在仿美团菜单滚动中也有用到这个方法实现去掉滚动条。)

	<template>
	<view>
		<scroll-view scroll-x class="no_scr2">
			<view v-for="(item,index) in no_data2" class="no_dat2 " :class="index == no_da2_index ?'cur':''" @tap="no_da2(index)">
					{{item.name}}
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				no_data2:[{
					name:"新闻"
				},{
					name:"资讯"
				},{
					name:'更多'
				},{
					name:'推荐'
				},{
					name:'热点'
				}],
				no_da2_index:0
			}
		},
		methods: {
			no_da2(e){
				this.no_da2_index = e
			}
		}
	}
</script>

<style>
	.no_scr2{
		text-align: center;
		box-sizing: border-box;
		white-space: nowrap;
		height: 110rpx;
		position: relative;
	}
	  .no_scr2::-webkit-scrollbar {
	    display: none;
	  }


	.no_dat2{
		width: 25%;
		display: inline-block;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
	}
	
	/deep/::-webkit-scrollbar {
	 display: none;
	 width: 0;
	 height: 0;
	}
		 .cur {
		color: #007AFF;
		position: relative;
	}
	
	 .cur::after {
		content: '';
		position: absolute;
		/* left: 58rpx; */
		left: 50%;
		transform: translate(-50%,0%);
		top: auto;
		bottom: -2rpx;
		right: auto;
		height: 6rpx;
		width: 40rpx;
		background-color: #32b66b;
	}
</style>

看完不点个赞再走吗