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

井眼

已于 2024-06-20 23:32:57 修改

阅读量2.1k

点赞数 17

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

于 2024-06-20 23:29:09 首次发布

本文链接：https://blog.csdn.net/weixin_42284031/article/details/139844800

一.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)
  }