个人实现微信小程序瀑布流

香橙战宝橙留香

已于 2022-08-29 20:09:57 修改

阅读量388

点赞数

文章标签：微信小程序小程序 p2p

于 2022-03-06 21:41:55 首次发布

本文链接：https://blog.csdn.net/qq7689095/article/details/123318149

版权

var app = getApp()



Page({

  data: {

    page: 1,

    goods: [],

    last_page: "",

  },

  onLoad: function (options) {

    let that = this;

    wx.request({

      url: 'http://www.workyy.com/index.php/admin/goodsList',

      data: {

        pageSize: 5, //每页查询条数

      },

      success: (res) => {

        console.log(res);

        that.setData({

          goods: res.data.data.data,

          last_page: res.data.data.last_page, //获取最后一页的页码数存起来

        })

      }

    })

  },



  //瀑布流分页 上拉

  onReachBottom: function (e) {

    let _this = this;

    let page = _this.data.page + 1; //获取下一页

    wx.showLoading({ //温馨提示正在加载第几页

      title: '正在加载第' + page + "页",

    })

    if (page > _this.data.last_page) { //判断是否到最后一页

      wx.showToast({

        //友情提示

        title: '到底了',

        icon: 'error'

      })

    }



    //设置定时器 过滤加载时间

    setTimeout(function () {

      wx.request({

        url: 'http://www.workyy.com/index.php/admin/goodsList',

        data: {

          page: page, //页码

          pageSize: 5 //一次查询几条

        },

        success(res) {

          _this.setData({

            page: _this.data.page + 1, //页码加一

            goods: _this.data.goods.concat(res.data.data.data) //两个数组合并

          })

        }

      })

      wx.hideLoading(); //清除正在加载的时间

    }, 1000)

  },

})