微信小程序分页(超简单)

之前写过一个项目主要是tab切换后的列表的一个分页(用的是uniapp),现在用的是微信原生的,没有切换,纯粹的一个分页的功能

页面的初始数据
data:{
	list:[ ],
	pagesize:10,//每页展示的条数
	curpage: 1,//当前页数
	 count:1//总页数
}
1. 这里是一个方法(getList),调用接口  一般都需要   当前页数和每页展示的条数   所以调接口传参 
		 {
           pagesize: this.data.pagesize,
            pageNumber:this.data.curpage
          }
返回res
 var arr1 = this.data.list;//页面此时展示的l列表(数组)
 var arr2 = res.list;//后端返回的列表(数组)
  arr1 = arr1.concat(arr2);//合并两个数组
  this.setData({
                list: arr1, //合并后更新list
                count:res.pageCount,//后台返回的列表的总页数   如果后台未返回 你可以直接使用列表长度除以每一页的页数然后上摄入(比如 Math.ceil(1.2)  // 2 ),因为多出来的两条数据也是一页 比如103条数据每页展示10条,10.3 那就是11页
              })
              
2.在onload种调用此方法 获取初始页面
this.getList();

3.  页面上拉触底事件的处理函数
 onReachBottom: function () {
    if(this.data.curpage <= this.data.count ){//这里是为了当前页数大于小于总页数,否则会一直刷新
      var curpage = this.data.curpage*1+1//上滑一次就加载下一页 在当前页数加一  就是加载下一页
      this.setData({
        curpage:curpage//更新data重的页数
      })
      this.getList();//再次调用(获取下一页的数据)
    }else{
      wx.showToast({
        title: '暂无更多数据',//如果当前页数大于总页数则不会刷新并显示提示
        icon: "none"
      })
    }

  }



结束啦,如果有问题或者建议,欢迎提出~

  • 3
    点赞
  • 52
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
以下是一个简单微信小程序分页实现代码示例: 1. 定义全局变量 在page的data中定义pageNum和pageSize两个变量用于分页: ``` data: { list: [], // 数据列表 pageNum: 1, // 当前页码 pageSize: 10, // 每页显示数量 hasMore: true // 是否还有更多数据 } ``` 2. 加载第一页数据 在onLoad事件中调用loadData方法加载第一页数据: ``` onLoad: function () { this.loadData(); } ``` loadData方法中设置请求参数并调用网络请求接口拉取数据,成功后将数据保存到list数组中: ``` loadData: function () { wx.showLoading({ title: '加载中...', }) var that = this; wx.request({ url: 'https://xxx.xxx.com/api/list', data: { pageNum: that.data.pageNum, pageSize: that.data.pageSize }, success: function (res) { if (res.data.code == 0) { var list = res.data.data.list; that.setData({ list: that.data.list.concat(list), hasMore: list.length >= that.data.pageSize, pageNum: that.data.pageNum + 1 }) } else { wx.showToast({ title: res.data.message, icon: 'none' }) } }, fail: function () { wx.showToast({ title: '网络异常', icon: 'none' }) }, complete: function () { wx.hideLoading(); } }) } ``` 3. 监听页面滚动事件 在页面的onPageScroll事件中监听页面滚动事件,当页面滚动到底部时加载下一页数据: ``` onPageScroll: function (e) { if (this.data.hasMore && e.scrollTop + e.windowHeight + 20 >= e.scrollHeight) { this.loadData(); } } ``` 4. 清空数据重新加载 如果需要重新加载数据,可以在页面中添加一个按钮,点击按钮时清空list数组并将pageNum重置为1,然后调用loadData方法加载第一页数据: ``` onReload: function () { this.setData({ list: [], pageNum: 1, hasMore: true }) this.loadData(); } ``` 以上是一个简单微信小程序分页实现代码示例,需要注意的是,实际开发中需要根据具体需求进行适当调整。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值