方法使用:
import BScroll from 'better-scroll';
- 引入 import BScroll from ‘better-scroll’; 横向滑动
- html 一共有三层
- li必须加 flex: none;
例:
<div ref="tab" class="tab">
<ul class="ulTab" ref="tabWrapper">
<li v-for="item in itemList" ref="tabitem" :key="item.id" @click="toggle(item.id)" :class="{red: item.id===active}">
{{item.title}}
</li>
</ul>
</div>
3.css
例"
.tab {
margin-bottom: 15px;
background: #fff;
width: 100%;
height: 40px;
overflow: hidden;
/* border-bottom: 1px solid #ccc; */
top: 52px !important;
margin-bottom: 15px;
.ulTab {
height: 100%;
display: flex;
line-height: 2rem;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
overflow: hidden;
height: 100%;
li {
height: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex: none;
width: 90px;
/* height: 36px; */
list-style: none;
font-size: 15px;
border-left: 1px solid #ccc;
}
}
}"
4.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,
bounce: false,
eventPassthrough: 'vertical'
});
} else {
this.scroll.refresh()
}
});
},
- mounted
例:
this.$nextTick(() => {
this.InitTabScroll();
});
```