vue实现列表无缝滚动效果_vue.js

npm install vue-seamless-scroll --save

import vueSeamlessScroll from "vue-seamless-scroll";

components: { vueSeamlessScroll },

<template>    <div class="seamlessRolling" @click="lookClick($event)">      <vue-seamless-scroll :data="msgData" :class-option="classOption">        <ul>          <li v-for="(item, index) in msgData" :key="index">            <span>{{ item.id }}</span>            <span>{{ item.title }}</span>            <span class="handle" :id="item.id" :data-tit="item.title">查看</span>          </li>        </ul>      </vue-seamless-scroll>    </div>  </template>    <script>  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）  // 例如：import 《组件名称》 from '《组件路径》'    import vueSeamlessScroll from "vue-seamless-scroll";  export default {    // import引入的组件需要注入到对象中才能使用    components: { vueSeamlessScroll },    data() {      // 这里存放数据      return {        msgData: [          {            id: 1,            name: 1,            title: "无缝滚动001",          },          {            id: 2,            name: 2,            title: "无缝滚动002",          },          {            id: 3,            name: 3,            title: "无缝滚动003",          },          {            id: 4,            name: 4,            title: "无缝滚动004",          },          {            id: 5,            name: 5,            title: "无缝滚动005",          },        ],      };    },    // 计算属性 类似于data概念    computed: {      classOption() {        return {          step: 1, // 数值越大速度滚动越快          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)        };      },    },    // 监控data中的数据变化    watch: {},    // 方法集合    methods: {      lookClick(e) {        if (e.target.className == "handle") {          console.log(e.target.id);          console.log(e.target.dataset.tit);        }      },    },    // 生命周期 - 创建完成（可以访问当前this实例）    created() {},    // 生命周期 - 挂载完成（可以访问DOM元素）    mounted() {},    beforeCreate() {}, // 生命周期 - 创建之前    beforeMount() {}, // 生命周期 - 挂载之前    beforeUpdate() {}, // 生命周期 - 更新之前    updated() {}, // 生命周期 - 更新之后    beforeDestroy() {}, // 生命周期 - 销毁之前    destroyed() {}, // 生命周期 - 销毁完成    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发  };  </script>    <style lang='scss' >  //@import url(); 引入公共css类  </style>  <style lang='scss' scoped>  //@import url(); 引入公共css类  * {    padding: 0;    margin: 0;  }  .seamlessRolling {    margin: 0 auto;    width: 300px;    height: 200px;    border: 1px solid rgb(165, 76, 76);    overflow: hidden;    ul,    li {      list-style: none;    }    li {      height: 60px;      line-height: 60px;      display: flex;      justify-content: space-around;      .handle {        cursor: pointer;      }    }  }  </style>