我昨天引入cube-ui的scroll组件横向滚动组件的时候,就是这个 横向滚动 - Horizontal,一直无法滚动,我找了半天都找不出来是为什么,由于昨天心情不好,也没有很认真去研究,今天再来看这个问题,终于发现原因了。
按照文档给出的如下代码是完全没有问题的:
<cube-scroll
ref="scroll"
:data="items"
direction="horizontal"
class="horizontal-scroll-list-wrap">
<ul class="list-wrapper">
<li v-for="item in items" class="list-item">{{ item }}</li>
</ul>
</cube-scroll>
.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
可是我作死啊,偏偏把它改成 less语法。。。然后就GG了,less语法不能正确编译出来,缺少了一个样式,最关键的一个:
.cube-scroll-content
display: inline-block
所以,现在改回来就可以了。