为什么要使用页面全局参数:方便使用数据。
由于总页数需要在另外的一个方法中使用,所以要把总页数变成一个页面全局参数。因为取数据使用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方法。