软件开发培训班 >> 编程开发 >> JavaScript


微信小程序上拉加载和下拉刷新功能实现

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

一.上拉加载

微信小程序的上拉加载使用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

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