微信小程序-scroll-view实现上拉加载和下拉刷新

一.scroll-view实现上拉加载

scroll-view组件通过自身一些属性实现上拉加载的功能。

lower-threshold=“100"属性表示距离底部多少px就会实现触发下拉加载的事件。
类似于在.json文件里面配置"onReachBottomDistance”: 100

bindscrolltolower="getMore"属性是监听下拉加载的所绑定的方法。
enable-back-to-top属性设置为ture表示点击状态栏或者标题栏回到顶部位置。

代码如下：

<scroll-view scroll-y="true"
class="scroll-y"lower-threshold="100"
bindscrolltolower="getMore"
enable-back-to-top
>
<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
</scroll-view>

监听下拉事件的方法（相当于onReachBottom）：

getMore(){console.log(2)wx.showLoading({title: '数据加载中...',})setTimeout(()=>{const lastNum=this.data.numList[this.data.numList.length-1]const newAry=[lastNum+1,lastNum+2,lastNum+3]this.setData({numList:[...this.data.numList,...newAry]})wx.hideLoading()},1500)}

二.上拉刷新

refresher-enabled ： 是否允许上拉刷新，相当于enablePullDownRefresh
refresher-default-style=“black” ：刷新时候的小圆点颜色，相当于backgroundTextStyle
refresher-background=“#f7f7f8” ： 刷新时候的背景颜色，相当于backgroundColor
bindrefresherrefresh=“refresh” ：监听刷新时候的方法，相当于onPullDownRefresh
refresher-triggered=“{{istriggered}}” ：刷新完毕后进行刷新区域的关闭，相当于方法wx.stopPullDownRefresh()

<scroll-view scroll-y="true"
class="scroll-y"refresher-enabledrefresher-default-style="black"refresher-background="#f7f7f8"bindrefresherrefresh="refresh"refresher-triggered="{{istriggered}}"
>
<view wx:for="{{numList}}" wx:key="*this">{{item}}</view>
</scroll-view>

监听刷新事件的方法：

  refresh(){console.log(1)wx.showToast({title: '下拉刷新...',})this.setData({numList:[1,2,3],istriggered:false})}