vue-seamless-scroll无缝滚动组件使用方法详解_vue.js

cnpm i -S vue-seamless-scroll

import VueSeamlessScroll from 'vue-seamless-scroll'  Vue.use(VueSeamlessScroll)

<template>    <div>        <vue-seamless-scroll          :data="listData"          :class-option="seamlessScrollOption"          style="            border: 1px solid white;            height: 200px;            overflow: hidden;            width: 200px;            color: white;            font-size: 18px;            text-align: center;          "        >          <ul>            <li              v-for="(item, index) in listData"              :key="index"              style="padding: 10px; margin: 5px"            >              <span class="title">{{ item.title }}：</span              ><span class="date">{{ item.time }}</span>            </li>          </ul>        </vue-seamless-scroll>    </div>  </template>     <script>     export default {    props: {},    data() {      return {        listData: [          {            title: "张三",            time: "2021-08-09",          },          {            title: "李四",            time: "2021-08-09",          },          {            title: "王五",            time: "2021-08-09",          },          {            title: "赵六",            time: "2021-08-09",          },          {            title: "前七",            time: "2021-08-09",          },          {            title: "孙八",            time: "2021-08-09",          },        ],      };    },    computed: {      seamlessScrollOption() {        return {          step: 0.2, // 数值越大速度滚动越快          limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length          hoverStop: true, // 是否开启鼠标悬停stop          direction: 1, // 0向下 1向上 2向左 3向右          openWatch: true, // 开启数据实时监控刷新dom          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)        };      },    },  };  </script>

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