按照官方写上html
<div class="scroll-list">
<cube-scroll
ref="scroll"
:data="tabsText"
direction="horizontal"
class="horizontal-scroll-list-wrap"
>
<ul class="list-wrapper">
<li v-for="(item,index) in tabsText" class="list-item" :key="item+index">{{ item +'qweqweqwe'}}</li>
</ul>
</cube-scroll>
</div>
写上css
<style lang="stylus" rel="stylesheet/stylus">
.horizontal-scroll-list-wrap
border: 1px solid rgba(0, 0, 0, 0.1)
border-radius: 5px
.cube-scroll-content
display: inline-block
.list-wrapper
padding: 0 10px
line-height: 60px
white-space: nowrap
.list-item
display: inline-block
</style>
结果发现横向根本不滚动,发现 cube-scroll-content 的样式根本没有生效。
解决: 直接改样式书写方式就可以了