密语星球

密语星球前端开发文档


下拉加载 better-scroll

<h5>更新日志</h5> <pre><code>1.新增参数:click Boolean 是否派发click事件 2.新增参数: scrollX Boolean 是否开启横向移动 3.新增参数:listenScroll Boolean 是否派发滚动事件 4.新增参数: data Array 监听到数据变化更新滚动区域 5.新增参数: pullup Boolean 是否开启上拉加载 6.新增参数: pulldown Boolean 是否开启下拉刷新 7.新增参数:beforeScroll Boolean 是否派发滚动开始事件 8.新增参数: refreshDelay Number 当数据更新后,刷新scroll的延时 9.新增事件:scroll Function 是否派发滚动事件,搭配 listenScroll 一起使用 10.新增事件:scrollToEnd Function 是否派发上拉加载,用于上拉加载,搭配 pullup 一起使用 11.新增事件:pulldown Function 是否派发顶部下拉事件,用于下拉刷新,搭配 pulldown 一起使用 12.新增事件:beforeScroll Function 是否派发列表滚动开始的事件,搭配 beforeScroll 一起使用</code></pre> <h5>一、使用方法</h5> <pre><code>import BetterScroll from "@/components/better-scroll.vue"; &lt;BetterScroll class="wrapper" :data="list" :click="true" :pullup="true" @scrollToEnd="onLoadMore" &gt; 滑动区域内容 &lt;/BetterScroll&gt;  .wrapper {     height: calc(100vh);     width: 100%;     overflow: hidden;   }</code></pre> <p>tips:滑动区域内容高度一定要超出外部wrapper的高度,否侧无法滑动</p> <h5>二、参数详解及示例</h5> <pre><code> probeType Number 事件触发类型 click Boolean 点击列表是否派发click事件 scrollX Boolean 是否开启横向滚动 listenScroll Boolean 是否派发滚动事件 data Array 列表的数据 pullup Boolean 是否派发滚动到底部的事件,用于上拉加载 pulldown Boolean 是否派发顶部下拉的事件,用于下拉刷新 beforeScroll Boolean 是否派发列表滚动开始的事件 refreshDelay Number 当数据更新后,刷新scroll的延时 </code></pre> <h5>三、searchForm 参数示例</h5> <pre><code>店员大厅(用户端):user/home/taklk-about.vue 发现页(用户端):user/find/find.vue 首页(用户端):user/index/index.vue </code></pre> <h5>四、文档地址</h5> <pre><code> 官方文档:https://github.com/ustbhuangyi/better-scroll 文档:https://www.mianshigee.com/tutorial/better-scroll/0.md</code></pre> <hr /> <p>作者:AXin 日期:2022-8-22</p>

页面列表

ITEM_HTML