为什么要使用页面全局参数:方便使用数据

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

posted on 2020-11-19 17:28  周文豪  阅读(1640)  评论(0编辑  收藏  举报