菜单左右滑动

效果如图所示

"vue-seamless-scroll": "^1.1.23", 安装该组件

 <div class="wrapper menu" ref="wrapper">
      <ul ref="content" class="content">
        <li class="activate">
          <i>首页</i>
          <div>首页</div>
        </li>
        <li
          v-for="(item, index) in menuList"
          :key="index"
          @click="menuSkip(item.name)"
        >
          <i>{{ item.meta.title }}</i>
          <div>{{ item.meta.title }}</div>
        </li>
      </ul>
      <div v-if="opac" class="opac">首页</div>
    </div>

    import BScroll from "better-scroll"; //引入该组件
    initScroll() {
      // 给内层盒子设置宽度，不设置宽度的话无法滚动

      let len = this.menuList.length + 1;
      let allWidth = 0;
      for (let i = 0; i < len; i++) {
        let liWidth = this.$refs.content.children[i].offsetWidth;
        allWidth += liWidth;
      }
      // 如果有外边距，可以这样写。需要去掉最后一个元素的外边距，在后面减一下
      // let width = this.goodslength * (60 + 10) - 10
      this.$refs.content.style.width = allWidth + 10 + 80 + "px"; //10 :放大的宽度，80是右边遮罩的宽度
      if (allWidth + 10 > this.$refs.wrapper.offsetWidth) {
        this.opac = true;
      } else {
        this.opac = false;
      }
      this.$nextTick(() => {
        if (!this.Scroll) {
          this.Scroll = new BScroll(this.$refs.wrapper, {
            click: true, // 配置允许点击事件
            scrollX: true, // 开启横向滚动
            eventPassthrough: "vertical", // 当设置 eventPassthrough 为 'vertical' 的时候，scrollY 无效
          });
        } else {
          this.Scroll.refresh(); // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
        }
      });
    },