better-scroll横向滚动、纵向滚动

   <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>