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