微信小程序实现上拉加载与下拉刷新的完整指南

微信小程序上拉加载和下拉刷新

一.上拉加载

在微信小程序开发中，实现上拉加载功能主要依赖于onReachBottom()函数，该函数需定义在.js文件的Page对象内部。

onReachBottom(){
    //上拉自动更新到4，5，6
    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)
  }

onReachBottom()用于监听用户的上拉滑动操作。为了精确控制触发时机，必须在.json配置文件中设置"onReachBottomDistance"属性。例如，当页面滚动距离底部50px时，即可触发onReachBottom()回调。

"onReachBottomDistance": 50px

二.下拉刷新

下拉刷新功能通过onPullDownRefresh()方法实现。

  onPullDownRefresh(){
    //下拉刷新后，显示1，2，3
    this.setData({
      numList:[1,2,3]
    })
    if(this.data.numList.length === 3){
      wx.stopPullDownRefresh()
    }
  }

需要注意的是，在onPullDownRefresh()执行完毕后，必须及时调用wx.stopPullDownRefresh()来停止刷新动画，否则界面可能会长时间停留在刷新状态。

微信小程序开发---上拉触底

一、上拉触底的概念

上拉触底是移动端特有的交互术语，指用户通过手指在屏幕上向上滑动（即向下滚动页面）来加载更多数据的行为。

二、监听页面的上拉触底事件

在页面的.js文件中，直接定义onReachBottom()函数即可监听当前页面的上拉触底事件。

onReachBottom(){
   console.log("上拉")
 }

三、配置上拉触底距离

上拉触底距离是指触发该事件时，滚动条距离页面底部的像素值。

开发者可以在全局或单个页面的.json文件中，通过配置onReachBottomDistance属性来设定具体的触发距离。

小程序默认的上拉触底距离为50px。

"onReachBottomDistance": 100

到此这篇关于微信小程序上拉加载和下拉刷新的文章就介绍到这了,更多相关小程序上拉加载和下拉刷新内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！