微信小程序下拉加载和上拉刷新两种实现方法
方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新
首先要在json文件里设置window属性
属性
类型
描述
enablePullDownRefresh
Boolean
是否开启下拉刷新,详见页面相关事件处理函数。
设置js里onPullDownRefresh和onReachBottom方法
属性
类型
描述
onPullDownRefresh
function
页面相关事件处理函数——监听用户下拉动作
onReachBottom
function
页面上拉触发底事件的处理函数
下拉加载说明:
当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
onPullDownRefresh(){
console.log('--------下拉刷新-------')
wx.showNavigationBarLoading() //在标题栏中显示加载
wx.request({
url: 'https://URL',
data: {},
method: 'GET',
// OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}
})
方法二:
在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉
属性
类型
描述
bindscrolltoupper
EventHandle
滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower
EventHandle
滚动到底部/右边,会触发 scrolltolower 事件
index.wxml
1
2
3
4
5 class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
6
7
8
9 {{item.name}}
10 {{item.short_description}}
11
12
13
14
15
16 加载中...17
18
19
index.js
1 var url = "http://www.imooc.com/course/ajaxlist";2 var page =0;3 var page_size = 5;4 var sort = "last";5 var is_easy = 0;6 var lange_id = 0;7 var pos_id = 0;8 var unlearn = 0;9
10
11 //请求数据
12 var loadMore = function(that){13 that.setData({14 hidden:false
15 });16 wx.request({17 url:url,18 data:{19 page : page,20 page_size : page_size,21 sort : sort,22 is_easy : is_easy,23 lange_id : lange_id,24 pos_id : pos_id,25 unlearn : unlearn26 },27 success:function(res){28 //console.info(that.data.list);
29 var list =that.data.list;30 for(var i = 0; i < res.data.list.length; i++){31 list.push(res.data.list[i]);32 }33 that.setData({34 list : list35 });36 page ++;37 that.setData({38 hidden:true
39 });40 }41 });42 }43 Page({44 data:{45 hidden:true,46 list:[],47 scrollTop : 0,48 scrollHeight:0
49 },50 onLoad:function(){51 //这里要注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
52 var that = this;53 wx.getSystemInfo({54 success:function(res){55 that.setData({56 scrollHeight:res.windowHeight57 });58 }59 });60 loadMore(that);61 },62 //页面滑动到底部
63 bindDownLoad:function(){64 var that = this;65 loadMore(that);66 console.log("lower");67 },68 scroll:function(event){69 //该方法绑定了页面滚动时的事件,我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
70 this.setData({71 scrollTop : event.detail.scrollTop72 });73 },74 topLoad:function(event){75 //该方法绑定了页面滑动到顶部的事件,然后做上拉刷新
76 page = 0;77 this.setData({78 list : [],79 scrollTop : 0
80 });81 loadMore(this);82 console.log("lower");83 }84 })
index.wxss
1 /**index.wxss**/
2
3 .userinfo {4 display: flex;5 flex-direction: column;6 align-items: center;7 }8
9 .userinfo-avatar {10 width: 128rpx;11 height: 128rpx;12 margin: 20rpx;13 border-radius: 50%;14 }15
16 .userinfo-nickname {17 color: #aaa;18 }19
20 .usermotto {21 margin-top: 200px;22 }23
24 /**/
25
26 scroll-view {27 width: 100%;28 }29
30 .item {31 width: 90%;32 height: 300rpx;33 margin: 20rpx auto;34 background: brown;35 overflow: hidden;36 }37
38 .item .img {39 width: 430rpx;40 margin-right: 20rpx;41 float: left;42 }43
44 .title {45 font-size: 30rpx;46 display: block;47 margin: 30rpx auto;48 }49
50 .description {51 font-size: 26rpx;52 line-height: 15rpx;53 }
效果图