下拉加载 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";
<BetterScroll class="wrapper" :data="list" :click="true" :pullup="true" @scrollToEnd="onLoadMore" >
滑动区域内容
</BetterScroll>
.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>