使用better-scroll横向加载

<template>
  <div class="announcement-x">
    <div ref="wrapper" class="wrapper">
      <ul class="cont" ref="cont">
        <li class="cont-item" v-for="item of announcementList" :key="item"></li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  name: "AnnouncementX",
  data() {
    return {
      // announcementList: []
    };
  },
  props: {
    announcementList: {
      type: Array,
      default: () => [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
  },
  methods: {
    verScroll() {
      let width = this.announcementList.length * 70; // 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
      this.$refs.cont.style.width = width + "px"; // 修改滚动区域的宽度
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper, {
            startX: 0, // 配置的详细信息请参考better-scroll的官方文档，这里不再赘述
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh(); //如果dom结构发生改变调用该方法
        }
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      let timer = setTimeout(() => {
        // 其实我也不想写这个定时器的，这相当于又嵌套了一层$nextTick，但是不这么写会失败
        if (timer) {
          clearTimeout(timer);
          this.verScroll();
        }
      }, 0);
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.announcement-x {
  padding: 5px 10px;
  box-sizing: border-box;
  .wrapper {
    width: 100%;
    overflow: hidden;
    touch-action: none;
    .cont {
      white-space: nowrap;
      overflow: hidden;
      background: #fff;
      box-shadow: 0px 0px 10px 5px #eceeee;
      .cont-item {
        width: 70px;
        height: 78px;
        margin-right: 10px;
        background: red;
        display: inline-block;
      }
    }
  }
}
</style>