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设置了百分百,这样他滑动到底部就不会有存在的空白页。