Vue中better-scroll第三方UI滑动库

最新推荐文章于 2024-09-13 21:48:09 发布

小鑫学习笔录

最新推荐文章于 2024-09-13 21:48:09 发布

阅读量556

点赞数

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_51619945/article/details/125645777

版权

在Vue的小程序或H5页面开发中，利用better-scroll第三方库能简化滑动列表的实现。初始化better-scroll时需指定滚动容器，如在ui库中，通常作用于外层wrapper并处理其第一个子元素content的滚动。通过设置probeType属性，可以控制scroll事件的派发频率，如 probeType=2 实现实时派发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于商家小程序或者H5页面时，需要滑动列表产生效果，原生写法方式比较复杂，可以使用第三方库

在实际项目中的使用：

/**
     * 功能：
     * 实现2个列表滑动：需要使用第三方库  better-scroll : UI滑动
     * 当前分类
     * 当滑动右侧列表时，更新当前分类
     * 点击某个分类项，右侧列表滑动到对应位置
     
     * 分析：
     * 根据哪些数据计算
     * scrollY：根据右侧滑动的Y轴坐标（滑动过程中实时在变化）
     * tops： 所有右侧分类li的top组成的数组（列表第一次显示后就不再变化）
     
     * 编码：
     * 1.在滑动过程中，实时收集scrollY
     * 2.列表第一次显示后，收集tops
     * 3.实现currentIndex的计算逻辑
     * 
     */

我们需要知道使用之前需要知道包含容器中的外容器是哪个：例如ui库的例子

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

上面的代码中 better-scroll 是作用在外层 wrapper 容器上的，滚动的部分是 content 元素。这里要注意的是，better-scroll 只处理容器（wrapper&#x

最低0.47元/天解锁文章