按照官方寫上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 的樣式根本沒有生效。
解決: 直接改樣式書寫方式就可以了