LSeamlessScroll

组件属性

属性名	说明	类型	默认值	必填	验证规则
dataList	滚动数据列表	Array	[]	否	-
classOptions	滚动配置选项	Object	见下方默认配置	否	-

classOptions 默认配置

{
  step: 1,               // 滚动步长
  limitMoveNum: 5,       // 启动无缝滚动所需的最小数据项数量
  hoverStop: true,       // 鼠标悬停时暂停
  direction: 1,          // 0:向下, 1:向上, 2:向左, 3:向右
  openTouch: true,       // 启用移动端触摸
  singleHeight: 0,       // 单项高度(设置则禁用hoverStop)
  singleWidth: 0,        // 单项宽度(设置则禁用hoverStop)
  waitTime: 1000,        // 步骤间暂停时间(毫秒)
  switchOffset: 30,      // 切换偏移量
  autoPlay: true,        // 自动开始滚动
  navigation: false,     // 手动控制(需要autoPlay: false)
  switchSingleStep: 134, // 单步切换距离
  switchDelay: 400,      // 手动控制的过渡时间(毫秒)
  switchDisabledClass: 'disabled', // 禁用状态类名
  isSingleRemUnit: false // 使用rem单位表示singleWidth/singleHeight
}

部分参数说明

dataList 参数

• type: Array
• required: true

说明

无缝滚动 list 数据 , 组件内部只关注 data 数组的 length。

classOptions 参数

step

• type: Number
• required: false
• default：1

说明

数值越大速度滚动越快。

step 值不建议太小,不然会有卡顿效果(如果设置了单步滚动,step 需是单步大小的约数,否则无法保证单步滚动结束的位置是否准确。比如单步设置的 30, step 不能为 4)

limitMoveNum

• type: Number
• required: false
• default：5

说明

开启无缝滚动的数据量。

hoverStop

• type: Boolean
• required: false
• default：false

说明

是否启用鼠标 hover 控制。

direction

• type: Number
• required: false
• default：1

说明

方向: 0 往下 1 往上 2 向左 3 向右。

singleHeight

• type: Number
• required: false
• default：0

说明

单步运动停止的高度(默认值 0 是无缝不停止的滚动)，direction 为 0|1 时生效。

singleWidth

• type: Number
• required: false
• default：0

说明

单步运动停止的宽度(默认值 0 是无缝不停止的滚动)，direction 为 2|3 时生效

waitTime

• type: Number
• required: false
• default：1000

说明

单步停止等待时间(默认值 1000ms)。

switchDelay

• type: Number
• required: false
• default：400

说明

单步切换的动画时间(ms)。

isSingleRemUnit

• type: Boolean
• required: false
• default：false

说明

singleHeight and singleWidth 是否开启 rem 度量。

组件示例

loading

组件使用

<template>
  <SeamlessScroll class="data-scroll-wrap" :classOptions="classOptions" :dataList="tableData">
    <div class="data-item" v-for="(item, index) of tableData" :key="index">
      <span>{{ index + 1 }}</span>
      <span>{{ item.name }}</span>
    </div>
  </SeamlessScroll>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { LSeamlessScroll } from '@vue3-simple-bui/screen';

export default defineComponent({
  name: 'Demo',
  components: {
    LScaleScreen,
  },
  setup() {
    // 配置项
    const classOptions = {
      limitMoveNum: 7,
      singleHeight: 52,
      waitTime: 2000,
    };

    const tableData = ref([
      { name: '数据1' },
      { name: '数据2' },
      { name: '数据3' },
      { name: '数据4' },
      { name: '数据5' },
      { name: '数据6' },
      { name: '数据7' },
      { name: '数据8' },
      { name: '数据9' },
    ]);

    return { classOptions, tableData };
  },
});
</script>