vue3中使用vue3-scroll-seamless插件

news/2024/9/28 16:37:40/

1、插件库官网地址:

https://xiaofulzm.github.io/vue3-scroll-seamless/

2、下载依赖。

npm install vue3-scroll-seamless --save

3、组件中使用。

   <vue3ScrollSeamlessref="vueSeamlessScroll":data="list":classOptions="classOptions"class="scroll-wrap"@mousewheel.native="handleScroll">/** 你需要滚动的内容 **/<van-cell :border="false" v-for="item of list"> </van-cell></vue3ScrollSeamless>// 插件的配置项。
const classOptions = reactive({step: 0.5, // 滚动速度limitMoveNum: list.value.length, // 循环的列表数据hoverStop: false, // 这个是鼠标点击后停止,我这里不需要所以关掉了。openWatch: true, // 开启数据实时监控刷新domdirection: 1, // 向下滚动,详情看文档。singleHeight: 0,
});// 样式:.scroll-wrap {// overflow: hidden;height: 100%;}

注意:这个插件会默认将列表数据渲染两遍,因此会有滑动到底部会有空白的情况,我这边差了好多资料没有找到解决办法
有设置他下边子元素display:none的办法,但是页面上还是会有空白页的情况。
我的最后解决办法是,这个整块的元素设置了高度,然后scroll-wrap设置了百分百,这样他滑动到底部就不会有存在的空白页。


http://www.ppmy.cn/news/1530984.html

相关文章

Java.动态代理

1.创建一个接口 package Mydynamicproxy1;public interface Star {public abstract String sing(String str);public abstract void dance(String str); }2.创建一个BigStar类&#xff0c;要实现Star这个接口 package Mydynamicproxy1;public class BigStar implements Star{…

基于Ubuntu22.04的cups安装与配置

目录 关于cups 关于cups Linux中的CUPS&#xff08;Common UNIX Printing System&#xff0c;通用UNIX打印系统&#xff09;是一个开源的打印系统&#xff0c;它提供了一套完整的管理打印设备、实现可靠打印和网络打印的方案。 Cups安装与与配置 1、升级系统 sudo apt updat…

Linux:终端(terminal)与终端管理器(agetty)

终端的设备文件 打开/dev目录可以发现其中有许多字符设备文件&#xff0c;例如对于我的RedHat操作系统&#xff0c;拥有tty0到tty59&#xff0c;它们是操作系统提供的终端设备。对于tty1-tty12使用ctrlaltF*可以进行快捷切换&#xff0c;下面的命令可以进行通用切换。 sudo ch…

【C++位图】构建灵活的空间效率工具

目录 位图位图的基本概念如何用位图表示数据位图的基本操作setresettest 封装位图的设计 总结 在计算机科学中&#xff0c;位图&#xff08;Bitmap&#xff09;是一种高效的空间管理数据结构&#xff0c;广泛应用于各种场景&#xff0c;如集合操作、图像处理和资源管理。与传统…

计算机毕业设计之:云中e百货微信小程序设计与实现(源码+文档+定制)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

JAVA集成Jasypt进行加密、解密(SpringBoot)

JAVA (SpringBoot) 集成 Jasypt 进行加密、解密 - 详细教程 在开发过程中&#xff0c;我们经常需要处理敏感数据&#xff0c;如数据库密码、API 密钥等。为了确保这些数据的安全性&#xff0c;我们可以使用加密技术来保护它们不被泄露。Jasypt&#xff08;Java Simplified Enc…

LInux操作系统安装Jenkins

1、什么是Jenkins Jenkins是一个开源软件项目&#xff0c;是基于Java开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件项目可以进行持续集成。 2、Jenkins的作用 持续的软件版本发布/测试项目。 监控…

【Java】异常处理 —— Throwable 及其应用

通过一张图来展示Throwable类的继承体系&#xff0c;如图2所示。 图2 Throwable异常体系结构图 ● Error类称为错误类&#xff0c;它表示Java运行时产生的系统内部错误或资源耗尽的错误&#xff0c;是比较严重的&#xff0c;仅靠修改程序本身是不能恢复执行的&#xff0c;例如…