无限加载,上拉加载
//可以直接拿来用哦~
//每个接口返回数据格式的不同,来修改对应下列方法当中的参数
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
//每页显示的行数:
page: 1,
//页码(从1开始):
rows: 7,
//排序方式:
paixu: 'viewcount',
//升序或降序:
order: 'desc',
//用于标识是否还有更多的状态
state: 1,
//用于渲染页面的数组
arrayProject: [],
//用于数组的追加和暂存
allProject: [],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var mythis = this;
getproinfo(this.data.page, this.data.rows, mythis)
},
/**
* 点击加载更多时触发
*/
loadMore: function () {
var mythis = this;
wx.showLoading({
title: '玩命加载中...',
});
mythis.data.page = mythis.data.datas.products_list + 1;
getproinfo(this.data.page,this.data.rows, mythis);
wx.hideLoading();
},
/**
* 页面上拉触底事件的处理函数,与点击加载更多做同样的操作
*/
onReachBottom: function () {
var mythis = this;
wx.showLoading({
title: '玩命加载中...',
});
//每一次请求接口,开始页数加一
//例如:第一次时,url/xxx?page=1&rows=7
//第二次时,url/xxx?page=2&rows=7
mythis.data.page = mythis.data.page + 1;
getproinfo(this.data.page, this.data.rows, mythis);
wx.hideLoading();
},
})
/**
* 获取项目列表
*/
function getproinfo(page, rows, mythis) {
wx.request({
url: 'xxxxxxxx',
method: 'GET',
data: {
page: page, //开始页数
rows: rows //每次请求条数
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
//如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0
if (res.data.datas.hasmore!= true)
mythis.setData({
state: 0
});
else {
var state1 = 1;
//如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载
if (res.data.datas.hasmore!= true)
var state1 = 0;
//循环将结果集追加到数组后面
for (var i = 0; i < res.data.datas.products_list.length; i++) {
mythis.data.allProject.push(res.data.datas.products_list[i]); //每条数据循环push进去
}
mythis.setData({
userData: mythis.data.allProject,
state: state1
});
}
console.log(mythis.data.userData)
},
fail: function (res) {
console.log(res);
}
});
}
//wxml
//样式需要自己写哦,外层循环,循环内来完成自己所需要的样式,需求等
<text wx:for="{{userData}}" wx-for-index="index" wx-for-item="item">
{{item.products_name}}
</text>