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、参数介绍：

key	description	default	val
step	数值越大速度滚动越快	1	Number
limitMoveNum	开启无缝滚动的数据量	5	Number
hoverStop	是否启用鼠标hover控制	true	Boolean
direction	方向 0 往下 1 往上 2向左 3向右	1	Number
openTouch	移动端开启touch滑动	true	Boolean
singleHeight	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	0	Number
singleWidth	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	0	Number
waitTime	单步停止等待时间(默认值1000ms)	1000	Number
switchOffset	左右切换按钮距离左右边界的边距(px)	30	Number
autoPlay1.1.17	版本前手动切换时候需要置为false	true	Boolean
switchSingleStep	手动单步切换step值(px)	134	Number
switchDelay	单步切换的动画时间(ms)	400	Number
switchDisabledClass	不可以点击状态的switch按钮父元素的类名	disabled	String
isSingleRemUnit	singleHeight and singleWidth是否开启rem度量	false	Boolean
navigation	左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false	false	Boolean

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

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

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

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

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