vuejs如何实现列表无缝滚动

772 ℃

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

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

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

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

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

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

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

生活小工具

收录了万年历、老黄历、八字智能排盘等100+款小工具!生活小工具
vuejs el-table导出excel表格
lodop插件打印基本参数介绍/设置基本参数
利用纯js实现表格全选功能
Chart.js图表开源库中文文档官网介绍
帝国cms技巧之关联外表连接sql语句