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()
    }