cube-ui的横向滚动不好使,失效问题解决cube-scroll

 按照官方写上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 的样式根本没有生效。

解决: 直接改样式书写方式就可以了

发布了149 篇原创文章 · 获赞 51 · 访问量 23万+

猜你喜欢

转载自blog.csdn.net/caoyan0829/article/details/91451762