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

秋天的稻草

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


一.上拉加载

微信小程序的上拉加载使用onReachBottom()，写在.js文件里面的Page方法里面。

1. onReachBottom(){
   
2.     //上拉自动更新到4，5，6
   
3.     wx.showLoading({
   
4.       title: '数据加载中...',
   
5.     })
   
6.     setTimeout(()=>{
   
7.       const lastNum=this.data.numList[this.data.numList.length-1]
   
8.       const newAry=[lastNum+1,lastNum+2,lastNum+3]
   
9.       this.setData({
   
10.         numList:[...this.data.numList,...newAry]
    
11.       })
    
12.       wx.hideLoading()
    
13.     },1500)
    
14.   }

复制代码

onReachBottom()会监听微信小程序上拉操作。
需要在.json文件里面配置"onReachBottomDistance"属性。
如下面的代码，在距离底部50px的时候会触发到onReachBottom()

1. "onReachBottomDistance": 50px

复制代码

二.下拉刷新

下拉刷新使用onPullDownRefresh()

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

复制代码

注意，在使用onPullDownRefresh() 的时候，需要及时使用wx.stopPullDownRefresh()进行关闭，不然可能会长时间显示刷新状态

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


一、上拉触底的概念

1. 上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多的数据，也就是往下滑动。

复制代码

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

1. 在页面.js文件宗，通过onReachBottom（）函数即可监听当前页面的上拉触底事件

复制代码

1. onReachBottom(){
   
2.    console.log("上拉")
   
3. }

复制代码

三、配置上拉触底距离

1. 上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。
   
2. 可以在全局或者页面的.json文件中，通过onReachBottomDistance属性配置上拉触底的距离
   
3. 小程序默认的距离是50px

复制代码

1. "onReachBottomDistance": 100

复制代码

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

来源:https://www.jb51.net/javascript/323393utq.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！