cube-ui，使用cube-scroll组件，如何支持纵向滚动支持横向滚动？

Question

我这种写法没有生效。

<template>
  <cube-page type="scroll-view" title="Scroll" class="option-demo">
    <div slot="content" class="scroll-wrapper">
      <div class="demo">
        <cube-scroll
          ref="scroll1"
          direction="vertical"
          class="scroll-list-outer-wrap">
          <ul class="cube-scroll-list">
            <li class="cube-scroll-item border-bottom-1px"
                v-for="(item, index) in items1"
                :key="index">{{item}}</li>
          </ul>
          <cube-scroll
            ref="scroll2"
            direction="horizontal"
            nestMode="native"
            class="scroll-list-inner-wrap">
            <ul class="cube-scroll-list">
              <li class="cube-scroll-item border-bottom-1px"
                  style="display: inline-block;white-space: nowrap;"
                  v-for="(item, index) in items2"
                  :key="index">{{item}}</li>
            </ul>
          </cube-scroll>
          <ul class="cube-scroll-list">
            <li
              class="cube-scroll-item border-bottom-1px"
              v-for="(item, index) in items1"
              :key="index">{{item}}</li>
          </ul>
        </cube-scroll>
      </div>
    </div>
  </cube-page>
</template>

<script type="text/ecmascript-6">
// import CubePage from '../../components/cube-page.vue'
const _data1 = [
  '? ? ? ? ? ? ',
  '?? outer ?? ',
  '? ? ? ? ? ? ',
  '?? outer ?? ',
  '? ? ? ? ? ☹️ '
];
const _data2 = [
  '? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ',
  //'?? inner ?? ',
  //'? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?? ? ? ? ? ?',
  //'?? inner ?? ',
  //'? ? ? ? ? ☹️ ',
  //'?? inner ?? ',
  //'? ? ? ? ? ? ',
  //'?? inner ?? ',
  //'? ? ? ? ? ? ',
  //'?? inner ?? ',
  //'? ? ? ? ? ? ',
  //'?? inner ?? ',
  //'? ? ? ? ? ? ',
  //'?? inner ?? ',
  //'? ? ? ? ? ? ',
  //'?? inner ?? ',
  //'? ? ? ? ? ? ',
  //'?? inner ?? ',
  //'✌? ✌? ✌? ✌? ✌? ✌? '
];
export default {
  data() {
    return {
      items1: _data1,
      items2: _data2
    };
  },
  components: {
    // CubePage
  }
};
</script>

<style lang="less">
  .scroll-list-outer-wrap
  .scroll-list-inner-wrap{
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
    position: relative;
  }

  .scroll-list-outer-wrap{
    height: 500px;
  }
  .scroll-list-inner-wrap{
    height: 50px;
  }
</style>

Answer 1

您好 我也遇到了这个问题 请问你知道怎么解决吗