vuejs如何实现列表无缝滚动

vuejs如何实现列表无缝滚动，下面web建站小编给大家简单介绍一下vue-seamless-scroll的使用方法！

1、安装脚手架

npm i vue-seamless-scroll --save　　

2、main.js全局引入

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

3、组件内使用

<template>
  <div id="app">
    <div class="backround">
      <div class="toptitle">
        <div class="item">日期</div>
        <div class="item">姓名</div>
        <div class="item">地址</div>
      </div>
      <vue-seamless-scroll :data="listData" :class-option="optionHover">
        <el-table :data="listData">
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="title" label="姓名"> </el-table-column>
          <el-table-column prop="test" label="地址"> </el-table-column>
        </el-table>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          title: "标题第一行",
          date: "2023-03-07",
          test: "测试",
        },
        {
          title: "标题第二行",
          date: "2023-03-07",
          test: "测试",
        },
        {
          title: "标题第三行",
          date: "2023-03-07",
          test: "测试",
        },
        {
          title: "标题第四行",
          date: "2023-03-07",
          test: "测试",
        },
        {
          title: "标题第五行",
          date: "2023-03-07",
          test: "测试",
        },
        {
          title: "标题第六行",
          date: "2023-03-07",
          test: "测试",
        },
        {
          title: "标题第七行",
          date: "2023-03-07",
          test: "测试",
        }
      ]
    };
  },
  computed: {
    optionHover() {
      return {
        step: 0.5, 
        limitMoveNum: 2,
        hoverStop: true, 
        direction: 1, 
        openWatch: true, 
        singleHeight: 0,
        singleWidth: 0, 
        waitTime: 1000 
      };
    }
  }
};
</script>

4、参数介绍：

vue页面如何利用插件实现列表滚动循环

标签： js文字滚动, js无缝滚动, vue-seamless-scroll

上面是“vuejs如何实现列表无缝滚动”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3793.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！