vue实现列表无缝滚动效果

这篇文章主要为大家详细介绍了vue实现列表无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue实现列表无缝滚动效果的具体代码，供大家参考，具体内容如下

1.安装

npm install vue-seamless-scroll --save

2.在需要使用的组件中引入进行配置

import vueSeamlessScroll from "vue-seamless-scroll";

在components中注入

components: { vueSeamlessScroll },

3.使用

<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>

4.配置项说明

data中的msgData为所需要实现滚动的列表数据,计算属性computeds中classOption为滚动属性的配置

5.可能会遇到的问题

vue-seamless-scroll是通过将要实现滚动的数据复制一遍来实现无缝滚动,当需要给每一条数据绑定事件时,如果直接绑定,复制出的数据无法绑定事件。可以通过事件委托的方式，给列表元素的父元素绑定事件，通过事件对象event,获取到点击元素的类名进行判断其是否为需要的元素,将绑定事件所需的id绑定为按钮id,可以通过event.target.id获取。或者将所要传递的变量绑定为该按钮的自定义属性，如data-tit，通过event.target.dataset.tit获取。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章: