微信小程序中的下拉刷新和上拉加载的实现方法详解

微信小程序下拉刷新上拉加载的两种实现方法，1、利用"onpulldownrefresh"和"onreachbottom"方法实现小程序下拉刷新上拉加载，2、在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉刷新上拉加载。

1. 利用"onPullDownRefresh"和"onReachBottom"方法

在js文件里直接写"onPullDownRefresh"和"onReachBottom"方法即可；

xml

 scroll-view scroll-y = true 
 .........
 /scroll-view 

js

onPullDownRefresh: function() {
 // Do something when pull down.
 console.log( #39;刷新 #39;);
 onReachBottom: function() {
 // Do something when page reach bottom.
 console.log( #39;circle 下一页 #39;);
 },

2. 在scroll-view里设定bindscrolltoupper和bindscrolltolower

在scroll-view里设定bindscrolltoupper和bindscrolltolower，然后在js里写好触发事件后对应的方法。[注意，使用这个模式一定要设置scroll-view的高度，100%不知道为什么设置后没效果，建议使用100vh]

xml

 scroll-view scroll-y = true bindscrolltolower= loadMore bindscrolltoupper= refesh 
 ..........
 /scroll-view 

js

onPullDownRefresh: function() {
 // Do something when pull down.
 console.log( #39;刷新 #39;);
 onReachBottom: function() {
 // Do something when page reach bottom.
 console.log( #39;circle 下一页 #39;);
 },

以上就是微信小程序中的下拉刷新和上拉加载的实现方法详解的详细内容，更多请关注php中文网其它相关文章！

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！