【uni-app scroll-view怎么去除滚动条】
uni-app scroll-view怎么去除滚动条博主在写导航时发现了scroll-view的一些小坑,比如(1)scroll-view里view里写不了弹性布局,居中需要用text-align: center;height: 100rpx;line-height: 100rpx;(2)滚动条一直去不掉我在网上找了很多去除滚动条的方法,都是说这样写即可::-webkit-scrollbar{ d
·
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>
看完不点个赞再走吗
更多推荐
已为社区贡献1条内容
所有评论(0)