本文記載如何在微信小程式裡面實現下拉刷新，上拉加載更多
先開看一下介面
大致如此的介面吧。 這個Demo使用了微信的幾個Api和事件，我先列出來。
1.wx.request （取得遠端伺服器的數據，可以理解成$.ajax）
2. scroll-view的兩個事件
2.1 bindscrolltolower（滑到頁底部時）時)
2.3 bindscrolltoupper (滑倒頁上方時)
然後我們看程式碼，詳細描述。
index.js
var url = "http://www.imooc.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)
}
})index.wxml請關注PHP中文網！
