VUE-自动轮播(vue-seamless-scroll标签)

skystrivegao / 2024-11-17 / 原文

  <vue-seamless-scroll
                      :data="item.point"
                     :class-option="classOption"
                      >
                      <template v-for="detail in item.point">
                        <div v-for="(value, key) in detail" :key="key">
                          <span>{{ key }}：</span>
                          <span :id="value">
                            {{ value }}
                          </span>
                        </div>
                      </template>
                    </vue-seamless-scroll>


 computed: {
      classOption() {
        return {
          step: 0.4, // 数值越大速度滚动越快
          hoverStop: true, // 是否开启鼠标悬停stop
          limitMoveNum: 8,
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        }
      },
    },