鍍金池/ 問答/HTML/ 如何使用滴滴開源項目cube-ui的內(nèi)置組件scroll來實現(xiàn)橫向滾動。

如何使用滴滴開源項目cube-ui的內(nèi)置組件scroll來實現(xiàn)橫向滾動。

看了cube-ui的文檔，發(fā)現(xiàn)是配置direction參數(shù)來控制滾動方向。當(dāng)我設(shè)置成"horizontal"這個值得時候，頁面變成這樣了。求一個使用cube-ui的scroll組件實現(xiàn)的例子，或者教教我現(xiàn)在這個要怎么改。。
clipboard.png
下面是代碼，template

  <div id="app">
    <div class="scroll-wrapper">
      <cube-scroll :data="items" :options="options" :direction="direction"></cube-scroll>
    </div>
  </div>

js

data() {
    return {
      items: [1, 2, 3, 4, 5, 6],
      direction: "horizontal",
      options: {
        scrollbar: {
          fade: false
        }
      },
      scrollX: true,
      scrollY: false
    }
  }

css

  .scroll-wrapper
    width 100%
    height 200px
回答
編輯回答
心沉

已實現(xiàn)，cube-ui中的scroll并不會因為設(shè)置direction為horizontal而生成適應(yīng)的布局,布局應(yīng)自己實現(xiàn)。添加以下代碼就好

 .scroll-wrapper
    position: relative;
    height: 200px;
    overflow: hidden;
  .cube-scroll-content
    display: inline-block
    position: relative
    z-index: 1
    width 13rem
  .cube-scroll-list
    margin: 0 auto;
    width 13rem
  .cube-scroll-item
    display: inline-block
    width 1.3rem
2017年5月13日 17:12