为什么要使用页面全局参数:方便使用数据。
由于总页数需要再另外的一个方法中使用,所以要把总页数变成一个页面全局参数。因为取数据使用this.xxx即可,中间不用加data,给页面全局参数赋值页方便,直接使用this.xxx=值即可,不需要使用setData()
页面全局参数与data同层级。
Page({ /**
* 页面的初始数据
*/
data: {
goodsList: [],
total: 0
},
//接口要的参数
QueryParams: {
query: '',
cid: '',
pagenum: 1,
pagesize: 10
},
// 总页数
totalPages: 1,
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//console.log(options)
this.QueryParams.cid = options.cid || ''
this.QueryParams.query = options.query || ''
this.getGoodsList();
},
async getGoodsList(){
//console.log(this.QueryParams)
const res = await request({url: "/goods/search",data: this.QueryParams})
console.log(res)
//获取总条数
const total = res.total
//计算总页数
this.totalPages = Math.ceil(total / this.QueryParams.pagesize)
console.log(this.totalPages)
this.setData({
//拼接了数组
goodsList: [...this.data.goodsList,...res.goods]
})
wx.stopPullDownRefresh();
}, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
goodsList: []
})
this.QueryParams.pagenum = 1;
this.getGoodsList();
}, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
// console.log("页面触底")
//判断还有没有下一页
if(this.totalPages > this.QueryParams.pagenum){
//console.log("还有下一页")
this.QueryParams.pagenum++;
this.getGoodsList();
}else{
//console.log("没有下一页了")
wx.showToast({
title: '没有下一页数据了!'
});
}
}, })
注意:获取data数据模型中的值是通过this.data.xx来获取的。注意:微信小程序中获取数据模型中的值和给数据模型中的属性赋值都与vue中的不一样。
把输入框的值赋值给data当中使用setData方法。