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

更新时间：2024年06月27日 12:05:54 作者：井眼

这篇文章主要介绍了微信小程序上拉加载和下拉刷新功能实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

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

一.上拉加载

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

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

您可能感兴趣的文章:

JavaScript实现多球运动效果
这篇文章主要为大家详细介绍了JavaScript实现多球运动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
layui: layer.open加载窗体时出现遮罩层的解决方法
今天小编就为大家分享一篇layui: layer.open加载窗体时出现遮罩层的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
Javascript 拖拽雏形中的一些问题(逐行分析代码，让你轻松了拖拽的原理)
这篇文章主要介绍了Javascript 拖拽雏形中的一些问题(逐行分析代码，让你轻松了拖拽的原理),需要的朋友可以参考下
2015-01-01
js window.onload 加载多个函数和追加函数详解
本篇文章主要是对js window.onload 加载多个函数和追加函数进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
浅谈JavaScript中this的指向问题
这篇文章主要介绍了浅谈JavaScript中this的指向问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
JavaScript如何实现数组内的值累加
我们会经常在开发过程中,需要获取数组中的值累加,所以下面这篇文章主要给大家介绍了关于JavaScript如何实现数组内的值累加的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
2023-11-11
原生JS实现顶部导航栏显示按钮+搜索框功能
这篇文章主要介绍了原生js实现顶部导航栏显示按钮+搜索框功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
Javascript组合继承方法代码实例解析
这篇文章主要介绍了Javascript组合继承方法代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-04-04
微信小程序开发常用功能汇总
这篇文章主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-02-02
详解如何在JS代码中消灭for循环
这篇文章主要介绍了详解如何在JS代码中消灭for循环，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12