微信小程序上拉加载和下拉刷新

上拉加载

注意容器高度不要设置100%,且onReachBottom在页面生成时就有,注意不用自己写,否则会有覆盖的可能,导致上拉加载没有效果,在json配置文件中可以配置距离底部距离"onReachBottomDistance": 10,

Page({

  /**
   * 页面的初始数据
   */
  data: {
    codeId:'',
    currentPage:1,
    pages:0,
    limit:10,
    list:[],
    show:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      codeId:options.codeId
    })
    this.getScanDetail(options.codeId,1,10);
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom:function() {
    // 先判断是否有请求正在进行中
    // 以及检查当前请求页数是不是小于数据总页数,如符合条件,则发送请求
    if (this.data.currentPage < this.data.pages) {
      this.getScanDetail(this.data.codeId,this.data.currentPage + 1,this.data.limit)
      this.setData({
        show:false
      })
    }else{
      this.setData({
        show:true
      })
    }
  },
  getScanDetail:function(id,page,limit,refresh){
    wx.request({
      url: '',
      method:'GET',
      header:{
        "Authorization": wx.getStorageSync('token')
      },
      data:{
        id:id,
        currentPage:page,
        limit:limit
      },
      success:res => {
        console.info(res)
        if(res.data.code == 1){
          var that = this;
          //console.info(this.formatDate(1598342542))
          res.data.data.list.forEach( function(item){
            item.scantime = that.formatDate(item.scantime)
          })
          this.setData({
            currentPage:page,
            pages:Math.ceil(res.data.data.total/limit),
            list:refresh?res.data.data.list:this.data.list.concat(res.data.data.list)
          })
          //console.info(this.data.scanList)
        }
      }
    })
  },
  formatDate:function(date){
    var d = new Date(date),
		month = '' + (d.getMonth() + 1),
		day = '' + d.getDate(),
    year = d.getFullYear(),
    hour = d.getHours(),
    minute = d.getMinutes(),
    seconds = d.getSeconds();
	  if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;
    if (hour.length < 2) hour = '0' + hour;
    if (minute.length < 2) minute = '0' + minute;
    if (seconds.length < 2) seconds = '0' + seconds;
    //console.info(seconds)
    return year+"年"+month+"月"+day+"日"+" "+hour+":"+minute+":"+seconds;
  },
})

 

 下拉刷新:

json文件中配置:enablePullDownRefresh:true

onPullDownRefresh() {
    // 上拉刷新
    if (!this.loading) {
      this. getScanDetail(this.data.codeId,this.data.currentPage,this.data.limit, true).then(() => {
        // 处理完成后,终止下拉刷新
        wx.stopPullDownRefresh()
      })
    }
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值