微信小程序上拉加载更多
注意问题:
1.当网速比较慢时候,可能会发生重复请求数据,所以需加一个开关的控制
2.窗口必须设置高度,否则无法触发事件
page.wxml
<scroll-view scroll-y style="height: {{windowHeight}}px;" bindscrolltolower="loadMore" >
<view class='list'>
<view class='item' wx:for="{{list}}">
{{item.title}}
</view>
</view>
</scroll-view>
page.js
// pages/news/news.js
Page({
/**
* 页面的初始数据
*/
data: {
list:[],//数据列表
windowHeight:'400',//窗口高度
page:1,//页码
flag:true //开关 true表示可以请求数据
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.requestData();
//获取屏幕高度
var that=this;
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight
})
}
})
},
requestData(){
this.setData({
flag:false
})
var that=this;
var api = 'http://www.phonegap100.com/appapi.php';
wx.request({
url: api,
data: {
a: 'getPortalList',
catid: '20',
page: that.data.page
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
if (res.data.result.length<20){//请求到的数据length<20时候,表示已经是最后一页,关掉开关
var f=false;
}else{
var f=true;
}
var list = that.data.list.concat(res.data.result)
var page = ++that.data.page;
that.setData({
list: list,
page: page,
flag: f
})
}
})
},
loadMore(){//出发加载更多
if (this.data.flag){
this.requestData();
}
}
})