<div ref="tab" class="tab">
<ul ref="tabWrapper" class="tab_content">
<li v-for="item in prodfoldPostList" ref="tabitem" :key="item.id" class="tab_item" @click="gotoBillList">
<div :style="[{'background':`url(${item.image}) no-repeat top center`},{'background-size': 'cover'}]" class="imgBg"/>
<!-- <div class="imgTitle">{{ item.title }}</div> -->
</li>
</ul>
</div>
<script>
import BScroll from 'better-scroll'
export default {
props: {
prodfoldPostList: {
default: () => [],
type: Array
}
},
data() {
return {
}
},
created() {
this.$nextTick(() => {
this.InitTabScroll()
})
},
methods: {
InitTabScroll() {
// 两个0.3表示左右padding
const width = 0.28 + 0.28 + 2.6 * this.prodfoldPostList.length + (this.prodfoldPostList.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()
}
})
},
gotoBillList() {
this.$router.push({ name: 'billList', params: { billList: this.prodfoldPostList }})
}
}
}
</script>
better-scroll横向滚动、纵向滚动的相关教程结束。
