• 微信小程序:页面全局参数(注意不是小程序的全局变量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方法

  • 相关阅读:
    关于jQuery的两对小括号()()的说明
    高效能 DBA 的七个习惯
    Div+CSS网站设计的优点
    .Net上传图片按比例自动缩小或放大
    SEO草根技术基础—DIV+CSS
    asp.net连接Mysql(connector/net 5.0)
    大型网站(高访问、海量数据)技术架构
    ISO Latin1字符集
    CuteEditor学习总结技巧
    Craigslist 的数据库架构
  • 原文地址:https://www.cnblogs.com/zwh0910/p/14006852.html
Copyright © 2020-2023  润新知