微信小程序-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-enabled
 refresher-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
    })
  }