Vue3.2——vue-seamless-scroll的使用

## 1.安装
npm install vue-seamless-scroll --save

## 2.完整实例代码
<div class="scroll_box"><button>无缝滚动</button><vue-seamless-scroll:data="tableData":class-option="optionSingleHeight"class="seamless-warp"><el-tableclass="table_wrap":data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="Date"width="180"/><el-table-columnprop="name"label="Name"width="180"/><el-table-columnprop="title"label="Title"/></el-table></vue-seamless-scroll></div>
import vueSeamlessScroll from "vue-seamless-scroll/src";const optionSingleHeight = computed(() => {return {step: 0.2, // 数值越大速度滚动越快// limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length// hoverStop: true, // 是否开启鼠标悬停stop// direction: 1, // 0向下 1向上 2向左 3向右// openWatch: true, // 开启数据实时监控刷新domsingleHeight: 26, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1// singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3// waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};
});
const tableData = [{date: "2016-05-03",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-02",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-04",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-01",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-03",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-02",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-04",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-01",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-03",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-02",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-04",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-01",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-03",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-02",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-04",name: "Tom",title: "No. 189, Grove St, Los Angeles",},{date: "2016-05-01",name: "Tom",title: "No. 189, Grove St, Los Angeles",},
];.seamless-warp {height: 229px;overflow: hidden;
}

vue-seamless-scroll在线演示文档

Vue3.2——vue-seamless-scroll的使用相关推荐

使用Vue3学习Vue的基础知识
创建 Vue 应用 vue的安装有多种方式,本文只讨论基础知识,其他安装方式请自行查阅官网 https://v3.cn.vuejs.org/guide/installation.html 本文使用CD ...
基于原生JS项目使用Vue3 + Surely Vue Table组件
Js & Surely Vue Table 本文主要说明,基于原生JS项目如何使用Surely Vue Table组件. Surely Vue Surely Vue Table 是 Ant D ...
vue3学习-vue create报错tunneling socket could not established
用vue-cli创建vue3单页应用时,报错: 网上很多说要设置淘宝镜像或者删除.vuerc文件,都没用. 经过不断踩坑,最终找到最佳解决方案: 1.取消npm代理设置,执行命令 npm config ...
vue中 @scroll的使用
@scroll 是 Vue 中的一个修饰符,可以用来监听元素的滚动事件. 使用方法: 在元素上绑定一个 @scroll 修饰符,并绑定一个事件处理函数,如: <template><d ...
【Antv/Vue3】vue项目中使用antv/L7制作地图
官网地址:快速上手 | L7 CDN方式引入: <head> <! --引入最新版的L7--> <script src = 'https://unpkg.com/@ant ...
基于 vue +better scroll滑动切换页面并支持下拉刷新案例
也是公司项目 ,内部app的资讯模块整改,改是不可能改的,之前还是用jquery.感觉越改越混乱,还是重做.就仿着今日头条.等资讯页面做了一个dome,话不多说,先看效果! 微信扫码预览效果看完,感 ...
vue3.0 vue.config.js配置（简洁，清晰）
const path = require('path') module.exports = {publicPath: '/',// 输出文件目录outputDir: 'dist',assetsDir: ...
vue3引入.vue文件以及.ts文件时提示找不到模块
1.找不到vue文件的,是因为ts无法解析我们的vue结尾的文件,所以需要在src目录下, 新建一个d.ts结尾的文件(可以叫env.d.ts) 然后里面这样写就可以 /// <referenc ...
【uni-app、vue】scroll滑动、二级分类任性多选
<template><view><view class="uni-padding-wrap uni-common-mt"><view cl ...
【Vue3】Vue的事件类型
一.常用事件常用事件说明 click 单击 dblclick 双击 focus 获取焦点 blur 失去焦点 change 元素内容改变 select 元素内容被选中 mousedown 鼠标按键 ...

Vue3.2——vue-seamless-scroll的使用

Vue3.2——vue-seamless-scroll的使用相关推荐

最新文章

热门文章