zoukankan      html  css  js  c++  java
  • 微信小程序:页面全局参数(注意不是小程序的全局变量globalData)

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

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

  • 相关阅读:
    监控Linux系统性能命令---sar
    用SecureCRT来上传和下载文件 rz sz
    CentOS7 Firewall NAT 及端口映射
    CentOS 修改主机名
    CentOS 6.X如何更改网卡名称
    MySQL数据操作
    mysql如何修改数据表
    Zabbix图形中中文字体显示方块
    Linux虚拟机模板的创建
    Java web项目JXl导出excel,(从eclipse上移动到tomact服务器上,之路径更改)
  • 原文地址:https://www.cnblogs.com/zwh0910/p/14006852.html
Copyright © 2011-2022 走看看