'title':'推荐'
},
{
'title':'深圳'
},
{
'title':'视频'
},
{
'title':'音乐'
},
{
'title':'热点'
},
{
'title':'新时代'
},
{
'title':'娱乐'
},
{
'title':'头条号'
},
{
'title':'问答'
},
{
'title':'图片'
},
{
'title':'科技'
},
{
'title':'体育'
},
{
'title':'财经'
},
{
'title':'军事'
},
{
'title':'国际'
}
] }
},
created() {
this.$nextTick(() => {
this.InitTabScroll();
});
},
methods:{
InitTabScroll(){
let width=0
for (let i = 0; i <this.itemList.length; i++) {
width+=this.$refs.tabitem[0].getBoundingClientRect().width; //getBoundingClientRect() 返回元素的大小及其相对于视口的位置
}
this.$refs.tabWrapper.style.width=width+'px'
this.$nextTick(()=>{
if (!this.scroll) {
this.scroll=new BScroll(this.$refs.tab, {
startX:0,
click:true,
scrollX:true,
scrollY:false,
eventPassthrough:'vertical'
});
}else{
this.scroll.refresh()
}
});
}
}
};
</script>
<style lang="scss" scoped>
.tab{
width: 100vw;
overflow: hidden;
padding:5px;
.tab_content{
line-height: 2rem;
display: flex;
.tab_item{
flex: 0 0 60px;
width:60px;
}
}
}
</style>
横向滚动需要注意。
只能有一层父级div，也就是容器
父容器要设置溢出隐藏并固定宽度
动态获取滚动区的宽度
因为最近项目需要，所以从网上查阅了许多资料也无法解决我的问题。 BetterScroll 官网也没有提供实际demo参考，所以就利用休息时间，写了这篇文章。希望能对你们有用。需要具体 demo 请移步，别忘了给个star啊，写文章不容易，给个赞呗！
tips:上文的代码可以直接使用，小伙伴们安装完依赖后可以直接copy测试哦~
