vue3-seamless-scroll无缝滚动组件使用

本文主要是介绍vue3-seamless-scroll无缝滚动组件使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Vue3.0 无缝滚动组件,支持Vite2.0,支持服务端打包

官网地址:https://github.com/xfy520/vue3-seamless-scroll

npm地址:vue3-seamless-scroll - npm
1.安装方式:
npm install vue3-seamless-scroll --save
yarn add vue3-seamless-scroll
<script src="https://unpkg.com/browse/vue3-seamless-scroll@1.0.2/dist/vue3-seamless-scroll.min.js"> </script>
2.使用方式

        全局注册:

import { createApp } from 'vue';
import App from './App.vue';
import vue3SeamlessScroll from "vue3-seamless-scroll";
const app = createApp(App);
app.use(vue3SeamlessScroll);
app.mount('#app');

        局部引用 :

import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
3.代码中使用:
<vue3-seamless-scroll:list="fineYarnList"class="scroll":limitScrollNum="scrollOptions.limitScrollNum":copyNum="scrollOptions.copyNum":step="scrollOptions.step":hover="scrollOptions.hover":direction="scrollOptions.direction"
><div>......</div>
</vue3-seamless-scroll><script lang="ts" setup>
const scrollOptions = ref({limitScrollNum: 15, //开启滚动的数据量,只有列表长度大于等于该值才会滚动step: 1, // 步进速度copyNum: computed(() => (fineYarnList.value.length >= 15 ? 1 : 0)), // 虚拟滚动列表拷贝的数量direction: "up" as "up" | "down" | "left" | "right" | undefined, // 控制滚动方向,可选值up,down,left,righthover: true // 鼠标悬停时,是否停止滚动
});
<script>
4.参数说明:
keydescriptiondefaulttype
list无缝滚动列表数据,组件内部使用列表长度。Array
v-model通过v-model控制动画滚动与停止,默认开始滚动trueBoolean
direction控制滚动方向,可选值updownleftright“up”String
isWatch开启数据更新监听trueBoolean
hover是否开启鼠标悬停falseBoolean
count动画循环次数,默认无限循环“infinite”Number
limitScrollNum开启滚动的数据量,只有列表长度大于等于该值才会滚动5Number
step步进速度1Number
singleHeight单步运动停止的高度0Number
singleWidth单步运动停止的宽度0Number
singleWaitTime单步停止等待时间(默认值 1000ms)1000Number
isRemUnitsingleHeight and singleWidth 是否开启 rem 度量trueBoolean
delay动画延时时间0Number
ease动画效果,可以传入贝塞尔曲线数值“ease-in”String | cubic-bezier
copyNum拷贝列表次数,默认拷贝一次,当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果1Number
wheel在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启falseBoolean
singleLine启用单行横向滚动falseBoolean

这篇关于vue3-seamless-scroll无缝滚动组件使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1058269

相关文章

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口?2. 如何使用空接口?第一,第二,第三,3. 空接口几个要注意的坑坑1:坑2:坑3:接口-空接口1. 什么是空接

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

java中使用POI生成Excel并导出过程

《java中使用POI生成Excel并导出过程》:本文主要介绍java中使用POI生成Excel并导出过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录需求说明及实现方式需求完成通用代码版本1版本2结果展示type参数为atype参数为b总结注:本文章中代码均为