vue中使用cube-ui实现横向滚动

vue中使用cube-ui实现横向滚动，可参考文档https://didi.github.io/cube-ui/#/zh-CN/docs/scroll，

下面是在编写的时候遇到的问题，做出的的总结

   <cube-scroll
      ref="scroll"
      :data="navData"
      direction="horizontal"
      class="horizontal-scroll-list-wrap menu-box">
      <ul class="menu" :style="{width:menuWidth+'px'} ">
        <li class="m-item" v-for="item in navData" :key="item.id">
          <router-link :to="item.url">
            <img :src="item.imgSrc">
            <p>{{item.title}}</p>
          </router-link>
        </li>
      </ul>
    </cube-scroll>

要在当前页给cube-scroll-content设置display: inline-block;

<style >
  .z-home .cube-scroll-content {
    display: inline-block;
  }
</style>

设置滚动宽度

    methods: {     
      menuStyle(){
        this.menuWidth=this.navData.length*188
      }

    },
    created() {
      this.menuStyle()
    }