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 的樣式根本沒有生效。

 

 

解決: 直接改樣式書寫方式就可以了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章