文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue实现列表无缝滚动效果

2024-04-02 19:55

关注

本文实例为大家分享了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获取。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯