better-scroll横向滚动纵向滚动
Posted glfan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了better-scroll横向滚动纵向滚动相关的知识，希望对你有一定的参考价值。
// 在vue中使用
<div ref="tab" class="tab">
<ul ref="tabWrapper" class="tab_content">
<li v-for="(item, index) in posterList" ref="tabitem" :key="item.id" class="tab_item" @click="gotoBillList(item, index)">
<div :style="[{‘background‘:`url(${item.image}) no-repeat top center`},{‘background-size‘: ‘cover‘}]" class="imgBg"/>
<!-- <div class="imgTitle">{{ item.title }}</div> -->
</li>
</ul>
</div>
//js部分
import BScroll from ‘better-scroll‘
created() {
this.$nextTick(() => {
this.InitTabScroll()
})
},
methods: {
InitTabScroll() {
// 两个0.3表示左右padding，动态计算子元素tabWrapper的宽度
const width = 0.28 + 0.28 + 2.6 * this.posterList.length + (this.posterList.length - 1) * 0.2
// for (let i = 0; i < this.itemList.length; i++) {
// width += this.$refs.tabitem[0].getBoundingClientRect().width // getBoundingClientRect() 返回元素的大小及其相对于视口的位置
// }
this.$refs.tabWrapper.style.width = width + ‘rem‘
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()
}
})
},
以上是关于better-scroll横向滚动纵向滚动的主要内容，如果未能解决你的问题，请参考以下文章
better-scroll中嵌套原生滚动组件,原生滚动组件失效问题