小程序手机滚动到底部实现分页功能

首先封装公共的request

request为封装的请求。写在util页面中导出,然后其他页面调用

module.exports = {
	request:request
}
/**
 * loading_type 等待类型  枚举值: 'center' 'bottom'  默认center 为bottom时不显示加载中,调用时自行处理
 */
function request(cmd, data, fnsuccess, fnfail, fncomplete, that, hideload, loading_type) {
  
  //app.globalData.sync.LoginSync.then(function (r) {
    //if (r.errcode == 0) {  //注释部分是防止小程序网络延迟未获取全局变量中的值
      
      if (!loading_type || loading_type == "center") {
        wx.showLoading({
          mask: true,
          title: '努力加载中'
        })
      }
      data.id = id;
      wx.request({
        url: requesturl + cmd,
        data: data,
        header: {
          Authorization: app.globalData.token
        },
        method: 'POST',
        dataType: 'json',
        success: function (res) {
          fnsuccess(res);
        },
        fail: function (res) {
          if (fnfail) fnfail(res);
        },
        complete: function (res) {
          if (hideload !== false) wx.hideLoading();
          if (fncomplete) fncomplete(res);

          //console.log(res);
          if (that) {
            if (res.data.errcode && (res.data.errcode == "FAIL" || res.data.errcode != 0)) {
              that.setData({
                Timeout: true
              });
              /*
              wx.showToast({
                title: '加载超时',
                icon: 'none',
                duration: 2000
              })*/
            } else {
              that.setData({
                Timeout: false
              });
            }
          }
        },
     })
   // }
  //})
}

其次接口请求数据使用封装request

小程序下拉滚动到底部接口分页 展现数据
js页面.


var util = require('../../../../utils/util.js');
const app = getApp();
var index = 1;  //初始分页
Page({
	data: {
      ticket_list:[],
      isover:false
    },
    limitTicketList:function(p_index){
	    var that = this;
	    if (p_index == undefined) { //刚进入页面时请求p_index为空(undefined)
	      p_index = 1;
	      index = 1;
	      that.setData({
	        isover: false
	      });
	    }
	    if(that.data.isover) return; //当请求到为空时 isover赋值为true,再次下拉不会再请求接口
	    var data = {
	      index: p_index,
	    }
	    util.request("接口名称", data, function (res) {
	      var dd = res.data;
	      if (dd.errcode != 0) {
	        util.alter(dd.errmsg);
	        return;
	      }
	
	      if (dd.data.list.length > 0) {
	      	index++;              
	      }
	      if (index > 1 && dd.data.list.length == 0) {
		      that.setData({
		        isover: true
		      });
		      return;
	      }
	      if (index <= 2) {
		      that.setData({
		        ticket_list: dd.data.list
		      });
		      return;
	      }
	      var ll = that.data.ticket_list;
	      for (var i = 0; i < dd.data.list.length; i++) {
	        ll.push(dd.data.list[i]);
	      }
	      that.setData({
	        ticket_list: ll,
	      });
	      
	    })
    
   },
   /**
   //下拉滚动时
   * 页面上拉触底事件的处理函数
   */
   onReachBottom: function () {
	   console.log(index)
	   this.limitTicketList(index);  
   },
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值