vue3中使用vue3-scroll-seamless插件

1、插件库官网地址：

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

2、下载依赖。

npm install vue3-scroll-seamless --save

3、组件中使用。

   <vue3ScrollSeamless
          ref="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, // 开启数据实时监控刷新dom
  direction: 1, // 向下滚动，详情看文档。
  singleHeight: 0,
});

// 样式：
 .scroll-wrap {
    // overflow: hidden;
    height: 100%;
  }

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

原文地址：https://blog.csdn.net/weixin_45535843/article/details/142451522

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！