微信小程序上拉加载和下拉刷新功能实现
更新时间：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
到此这篇关于微信小程序上拉加载和下拉刷新的文章就介绍到这了,更多相关小程序上拉加载和下拉刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这个方法是很常用的，比如在验证输入日期是否存在时，可以使用它，如果是一个不存在的日期，则其返回值将是NaN，另外如果要比较两个日期的先后，或是计算两个日期相差的天数 ，都可以用到。2010-07-07
JavaScript实现统计文本框Textarea字数增强用户体验
现在流行的Twitter等微博客网站，有一个很好的用户体验，就是在文本框中输入文字的时候，会自动统计输入的字符，并显示用户还能输入的字符，在限制了140个字的微博客中，这样的小提示可以很好的增强用户体验,本文也尝试着实现一下2012-12-12
基于js disabled="false"不起作用的解决办法
本篇文章是对js disabled="false"不起作用的解决办法进行了详细的分析介绍，需要的朋友参考下2013-06-06
本章节讨论使用ES6编码风格到代码中需要注意的点。通过记住这些关键点，可以让我们写出更优美的、可读性更强的JavaScript ES6风格的代码。2021-05-05
浅谈类似于(function(){}).call()的js语句
这篇文章主要介绍了浅谈类似于(function(){}).call()的js语句,的相关资料,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了微信小程序实现左滑修改、删除功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了微信公众平台获取access_token的方法步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
本文主要介绍了在网页开发中,如何使用JavaScript在文本输入框或富文本编辑器的光标位置插入内容的实践,包括获取光标位置的方法,创建文本节点,操作Selection对象,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-10-10
由于网盘不稳定,很多时候文件提示找不到，幸好U盘里存了. 喜欢这3个风格的朋友们别在PM我啦.....我把文件传到我服务器上了..2008-07-07
uniapp Android解决 APP菜单、按钮权限控制方法
这篇文章主要介绍了uniapp Android解决 APP菜单、按钮权限控制方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
最新评论