☆☆ 利用scroll-view标签根据设备宽度实现上拉分页加载更多
1,WXML:
<scroll-view scroll-y style='height:{{windowHeight}}px;' bindscrolltolower="loadMore">
<!-- bindscrolltolower 滚动到底部/右边时触发 -->
<view class='list'>
<view class='item' wx:for="{{list}}">
{{item.title}}
</view>
</view>
</scroll-view>
2,JS:
// pages/test/test.js
Page({
//数据初始化
data: {
list:[], //接收数据的数组
windowHeight:"", //适配设备的高度
page:1, //记录加载数据的页数参数
flag:true //记录是否请求数据的状态
},
//生命周期函数--监听页面加载
onLoad: function (options) {
//获取新闻数据
this.requestData();
//把this对象复制到临时变量that
var that = this;
//获取设备信息,获取屏幕的Height属性
wx.getSystemInfo({
success: function(res) {
that.setData({
windowHeight : res.windowHeight
})
}
})
},
//请求数据
requestData(){
//打开记录请求的状态flag
this.setData({
flag:false
})
//把this对象复制到临时变量that
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){ //请求成功
//数据少于20条时,即请求到了最后一页
if(res.data.result.length < 20){
//记录请求状态,把reqState传值给flag
var reqState = false;
}else{
var reqState = true;
}
//接收数据,保证每次都拼接上
var list = that.data.list.concat(res.data.result);
//为下一页的请求参数做准备
var nextPage = ++that.data.page;
that.setData({
list:list,
page:nextPage,
flag:reqState
})
},
fail:function(error){ //请求失败
console.log(error);
}
})
},
//scroll-view 滚动到底部/右边时触发触发
loadMore(){
//根据请求状态flag请求数据
if(this.data.flag){
this.requestData();
}
}
})
3,WXSS
/* pages/test/test.wxss */
.list{
padding: 10rpx;
}
.item{
line-height: 88rpx;
height: 88rpx;
overflow: hidden;
border-bottom: 1rpx solid #eee;
}
注:需要打开【不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书】操作