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方法

  • 相关阅读:
    付出给人一种美好的感觉
    表连接查询 条件在On与Where后区别
    Json与实体类 转化
    算法的时间复杂度和空间复杂度详解
    真的理解同步和异步了吗?
    花生壳申请域名并进行内网穿透
    XML 反序列化
    .Net 发送邮件
    BootStrap DataTable 时间日期列排序
    SQL Server 动态SQL拼接
  • 原文地址:https://www.cnblogs.com/zwh0910/p/14006852.html
Copyright © 2011-2022 走看看