很多网友在开发微信小程序时候，往往会遇到列表下拉刷新加载问题。今天列举方法希望对你有帮助！
前端wxml页面代码：
<view class="container">
<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"
class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
<view class="item" wx:for="{{list}}">
<image class="img" src="{{item.pic_url}}"></image>
<view class="text">
<text class="title">{{item.name}}</text>
<text class="description">{{item.short_description}}</text>
</view>
</view>
</scroll-view>
<view class="body-view">
<loading hidden="{{hidden}}" bindchange="loadingChange">
加载中...
</loading>
</view>
</view>
|
前端 js 页面：
var url = "http://www.lanrenmb.com/course/ajaxlist";
var page =0;
var page_size = 20;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
// 获取数据的方法，具体怎么获取列表数据大家自行发挥
var GetList = function(that){
that.setData({
hidden:false
});
wx.request({
url:url,
data:{
page : page,
page_size : page_size,
sort : sort,
is_easy : is_easy,
lange_id : lange_id,
pos_id : pos_id,
unlearn : unlearn
},
success:function(res){
//console.info(that.data.list);
var list = that.data.list;
for(var i = 0; i < res.data.list.length; i++){
list.push(res.data.list[i]);
}
that.setData({
list : list
});
page ++;
that.setData({
hidden:true
});
}
});
}
Page({
data:{
hidden:true,
list:[],
scrollTop : 0,
scrollHeight:0
},
onLoad:function(){
// 这里要非常注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
var that = this;
wx.getSystemInfo({
success:function(res){
console.info(res.windowHeight);
that.setData({
scrollHeight:res.windowHeight
});
}
});
},
onShow:function(){
// 在页面展示之后先获取一次数据
var that = this;
GetList(that);
},
bindDownLoad:function(){
// 该方法绑定了页面滑动到底部的事件
var that = this;
GetList(that);
},
scroll:function(event){
// 该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
this.setData({
scrollTop : event.detail.scrollTop
});
},
refresh:function(event){
// 该方法绑定了页面滑动到顶部的事件，然后做上拉刷新
page = 0;
this.setData({
list : [],
scrollTop : 0
});
GetList(this)
}
})
|
以上总结：
1.wx.request （获取远程服务器的数据，可以理解成$.ajax）
2. scroll-view的两个事件
2.1 bindscrolltolower（滑到页面底部时）
2.2 bindscroll (页面滑动时)
2.3 bindscrolltoupper (滑倒页面顶部时)
配上效果图：
.jpg)
.jpg)
