老规矩先上效果图
这里的话 xwml页面展示就不贴代码了，意义不大。直接上js

js页面

注意事项

主要使用的是 onPullDownRefresh 函数与 onReachBottom函数，一个是下拉一个刷新，
requestSimple是我封装的提交函数，下面贴代码了

分页重要

1.onPullDownRefresh 是用户下拉手势，相当于刷新页面，onReachBottom用户上拉手势，相当于请求分页

2.用户上拉一次，执行一次onReachBottom函数。页面用同一个 list集合，分页请求之后，把数据追加到list集合的后面，使用concat函数（代码中有），思路很简单。

3.有任何问题，下方留言哈。目前来说没有遇到任何问题

Page({/*** 页面的初始数据*/data: {pageIndex: 1, //分页当前的页数pageSize: 5,//每页的数量scheme: false,//方案showLoading: true,showDownLoading: true,urlBase: url.urlBase,//图片路径guideList:[],//导游集合},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {//下拉函数相当于刷新第一页的数据，所以页数写死wx.showNavigationBarLoading() //在标题栏中显示加载var that = this;let pageNo = 1;requestSimple(url.url.getGuideList,{sort: that.data.sort,scheme: pageParams.pageParams.scheme,city: app.globalData.defaultCity,pageIndex: pageNo,pageSize: 5,minage: that.data.minAge,maxage: that.data.maxAge,sex: that.data.sex,language: that.data.language,viewspot_id: "",certificatetype_id: that.data.certificateId,tourist_long: pageParams.pageParams.userLongitude,tourist_lat: pageParams.pageParams.userLatitude},function (res) {if (res.code == 300) {wx.showToast({title: '没有更多数据',})} else {if (pageParams.pageParams.scheme == "1") {that.setData({//方案一采用"scheme": true,})}that.setData({//导游列表"guideList": res,})that.data.pageIndex = 1;}});setTimeout(function () {wx.hideNavigationBarLoading() //完成停止加载wx.stopPullDownRefresh() //停止下拉刷新}, 600);},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {var that = this;let pageNo = this.data.pageIndex + 1;//注意这里先将页数+1 如果请求到了数据，再写入全局变量，否则不写。一个思路requestSimple(url.url.getGuideList,{sort: that.data.sort,scheme: pageParams.pageParams.scheme,city: app.globalData.defaultCity,pageIndex: pageNo,pageSize: 5,minage: that.data.minAge,maxage: that.data.maxAge,sex: that.data.sex,language: that.data.language,viewspot_id: "",certificatetype_id: that.data.certificateId,tourist_long: pageParams.pageParams.userLongitude,tourist_lat: pageParams.pageParams.userLatitude},function (res) {if (res.code == 300) {wx.showToast({title: '没有更多数据',})} else {if (pageParams.pageParams.scheme == "1") {that.setData({guideList: that.data.guideList.concat(res) //注意因为第二次请求的时候数据直接追加到第一页list的后面，所以使用 concat方法，这个很重要})that.data.pageIndex = that.data.pageIndex + 1; //将页面+1}});},})

工具类 requestSimple


/*通用request没有loading-->requestSimple*/
function requestSimple(url, data, success, method, error) {console.log(url,data);var m = method ? method : 'POST';var that = this;return wx.request({url: url,header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8',},data: data,method: m,success: function (res) {if (res.data.code == "200") {success(res.data.data);return;}else{var ndata = {code:300,msg:"未请求到数据"}success(ndata);}},error: function (res) {error(res);}})
}

微信小程序列表的分页实现（最新的最简易的实现方式+思路，附代码）相关推荐

微信小程序列表页分页加载功能
微信小程序做分页加载数据,会做一些下拉加载更多.然后上拉刷新的操作.数据放在一个for循环里去加载,数据源是一个数组对象.在加载下一页数据时,将下一页的数据拼到当前数组后面. 代码如下: wxml代码 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
微信小程序涉嫌通过中断用户体验、限制用户操作的方式，收集与服务无关的用户个人信息，包括但不限于，手机号、
微信小程序涉嫌通过中断用户体验.限制用户操作的方式,收集与服务无关的用户个人信息,包括但不限于,手机号.身份证号.生日.住址等,违反<微信小程序平台运营规则>及相关规则,建议尽快整改.具体 ...
微信小程序|列表渲染-for循环
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述大家学习程序设计都知道for循环,而且很多编程都需要 ...
微信小程序列表数据渲染无效问题
我实在是太菜了隔了2,3个月没做,微信小程序的数据渲染竟然都不会用了记住要让修改的数据立即生效只能用setData方法!! 下面转了一篇文章里面的内容,方便大家比较转自:http://www.jb ...
微信小程序列表开发-个人中心界面-wxss(二)
微信小程序的wxss类似于css,是对页面样式的优化. 上篇讲了写个人中心的大概模板,这次把wxss里面详细讲一下. .b1{width:750rpx;height:300rpx;margin-bot ...
ssm基于微信小程序的社区老人健康管理服务系统的设计与实现毕业设计-附源码011513
摘要随着现在网络的快速发展,网络的应用在各行各业当中它很快融入到了许多分类管理之中,他们利用网络来做这个社区老人健康管理服务系统,随之就产生了"社区老人健康管理服务系统 .",这 ...

微信小程序列表的分页实现（最新的最简易的实现方式+思路，附代码）

js页面

注意事项

分页重要

1.onPullDownRefresh 是用户下拉手势，相当于刷新页面，onReachBottom用户上拉手势，相当于请求分页

2.用户上拉一次，执行一次onReachBottom函数。页面用同一个 list集合，分页请求之后，把数据追加到list集合的后面，使用concat函数（代码中有），思路很简单。

3.有任何问题，下方留言哈。目前来说没有遇到任何问题

工具类 requestSimple

微信小程序列表的分页实现（最新的最简易的实现方式+思路，附代码）相关推荐

最新文章

热门文章

微信小程序 列表的分页实现（最新的最简易的实现方式+思路，附代码）

js页面

注意事项

分页重要

1.onPullDownRefresh 是用户下拉手势，相当于刷新页面，onReachBottom用户上拉手势，相当于请求分页

2.用户上拉一次，执行一次onReachBottom函数。页面用同一个 list集合，分页请求之后，把数据追加到list集合的后面，使用concat函数（代码中有），思路很简单。

3.有任何问题，下方留言哈。目前来说没有遇到任何问题

工具类 requestSimple

微信小程序 列表的分页实现（最新的最简易的实现方式+思路，附代码）相关推荐

最新文章

热门文章

微信小程序列表的分页实现（最新的最简易的实现方式+思路，附代码）

微信小程序列表的分页实现（最新的最简易的实现方式+思路，附代码）相关推荐