// 在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() } }) },