网站开发前台后台,域名注册空间网站,企业网站推广策划,推广一单500一、前情提要
微信小程序中实现上拉加载更多#xff0c;其实就是pc端项目的分页。使用的是scroll-view#xff0c;scroll-view详情在微信开发文档/开发/组件/视图容器中。每次上拉#xff0c;就是在原有数据基础上#xff0c;拼接/合并上本次上拉请求得到的数据。这里采用…一、前情提要
微信小程序中实现上拉加载更多其实就是pc端项目的分页。使用的是scroll-viewscroll-view详情在微信开发文档/开发/组件/视图容器中。每次上拉就是在原有数据基础上拼接/合并上本次上拉请求得到的数据。这里采用的是concatconcat 是数组对象的一个方法用于合并两个或多个数组生成一个新的数组。这个方法不会修改原始数组而是返回一个新的数组concat使用示例如下
// 示例数组
const array1 [1, 2, 3];
const array2 [4, 5, 6];
const array3 [7, 8, 9];// 使用concat合并数组
const mergedArray array1.concat(array2, array3);// 打印结果
console.log(原始数组1: , array1);
console.log(原始数组2: , array2);
console.log(原始数组3: , array3);
console.log(合并后的数组: , mergedArray);//输出结果应为
原始数组1: [1, 2, 3]
原始数组2: [4, 5, 6]
原始数组3: [7, 8, 9]
合并后的数组: [1, 2, 3, 4, 5, 6, 7, 8, 9]
二、代码示例1不使用onReachBottom
index.wxml
//1、scroll-y 允许纵向滚动
//2、lower-threshold100px 距底部/右边多远100px时触发 scrolltolower 事件
//3、scroll-top{{topHeight}}px 设置竖向滚动条位置
view classbox!-- 列表 --scroll-view scroll-y lower-threshold100px bindscrolltolowerscrollToLower styleheight: 80vh; scroll-top{{topHeight}}px classscrViewview classlistBox wx:for{{groupData}} wx:keyidview classname{{item.name}}/viewview classphone{{item.mobile}}/viewimage src../../image/icon/bj.png bindtapeditRecipient data-item{{item}} classmini-btn /image src../../image/icon/sc.png bindtapdeleteRecipient data-id{{item.id}} classmini-btn2 //viewview styletext-align: center;view wx:if{{loading}}加载中.../viewview wx:if{{noMore !noData}}没有更多了/viewview wx:if{{noData}}暂无数据/view/view/scroll-view
/viewindex.js
Page({data: {loading: false, //加载更多的loadingnoMore: false, //没有更多了noData:false, //暂无数据isPage:false, // 是否需要分页 ispage的作用 进页面首次在onLoad中调用时不需要合并数据page:1,limit:5,topHeight:0, },/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getContactList()},// restore函数的作用当业务有搜索、删除、新增、编辑等操作时需要还原对应参数状态。// 初始化数据restore(){this.setData({loading: false, //加载更多的loadingnoMore: false, //没有更多了noData:false,isPage:false,page:1,limit:5,topHeight:0, })},getContactList(isPage){let params {page:this.data.page,limit:this.data.limit,tid: this.data.inquirFform.tagID}req.group.contactList(params).then((res) {if (isPage) {// 下一页数据拼接在原始数据后面this.setData({groupData: this.data.groupData.concat(res.data.list),loading: false})} else {this.setData({groupData: res.data.list,loading: false})}//如果返回的数据为空那么就没有下一页了if (res.data.list.length 0 this.data.isPage) {this.setData({noMore: true})}if (res.data.list.length 0 !this.data.isPage) {this.setData({noMore: true,noData:true})}})},// 下滑到底部触发scrollToLower(){if (!this.data.loading !this.data.noMore) {this.setData({loading: true,page: this.data.page 1,isPage:true})this.getContactList(this.data.isPage)}},
})示例图片如下
三、代码示例2使用onReachBottom1
onReachBottom监听用户上拉触底事件。 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。 在触发距离内滑动期间本事件只会被触发一次。 每次请求数据时候在底部提示加载中 当请求完全部数据时在底部提示 没有更多数据了 后端返回数据总条数 如下.js文件中的 total 判断 每次请求时判断前端拿到的总数据的length total若是等于 则显示 没有更多数据了并且 再次上拉时不进行数据的请求。 前端传 page 当前页 每次请求 page 1 limit:没有数量 前端自己写个固定值就行 业务参数若列表支持查询搜索等传自己的业务数据 后端返回 total:总数据条数 data:[] 对应的数据列表 有导航切换的需要注意切换导航后先重置 加载中提示没有更多数据提示page等参数后在请求数据
、、、 1、wxml
view classcontentview classbodyview classbox wx:for{{proArr}} wx:key_idxzs-product-item item{{item}}/xzs-product-item/view/viewview classloadOutvan-loading size24px wx:if{{loading}}加载中.../van-loadingview classnoData wx:if{{isData}}没有更多数据了~/view/view
/view
;3、.js Page({/*** 页面的初始数据*/data: {navActive:0,navArr:[],proArr:[],page:1,limit:10,loading:false,isData:false},/*** 生命周期函数--监听页面加载*/async onLoad(options) {let {idx} options; await this.getNavList(); if(idx){this.navChange(idx);}else{navid this.data.navArr[0]._id;this.getProductList();}},//获取产品列表getProductList(){this.setData({loading:true})queryProduct({navid:navid,page:this.data.page,limit:this.data.limit}).then(res{ let oldArr this.data.proArr;let newArroldArr.concat(res.data) console.log(res);this.setData({proArr:newArr,loading:false})if(res.total this.data.proArr.length){this.setData({isData:true})}})},//导航条切换事件navChange(e){ let index e?.detail?.index ?? e;navid this.data.navArr[index]._idthis.setData({proArr:[],loading:false,isData:false,page:1,navActive:Number(index)}) this.getProductList();},/*** 页面上拉触底事件的处理函数*/onReachBottom() {if(this.data.isData) return;this.setData({page:this.data.page 1})this.getProductList()},
})四、代码示例2使用onReachBottom2
这个同 三、代码示例2类似只不过是请求时传递给后端的参数不同前端传 size: 就是列表数据的长度初始是0。例如第一次请求得到数据长度为5 那么上拉数据请求时候size就传5再次上拉合并数据后长度为10下次上拉请求就传10
1、.wxml
view classcontentview classbodyview classbox wx:for{{proArr}} wx:key_idxzs-product-item item{{item}}/xzs-product-item/view/viewview classloadOutvan-loading size24px wx:if{{loading}}加载中.../van-loadingview classnoData wx:if{{isData}}没有更多数据了~/view/view
/view2、.js
Page({/*** 页面的初始数据*/data: {navActive:0,navArr:[],proArr:[],loading:false,isData:false},/*** 生命周期函数--监听页面加载*/async onLoad(options) {this.getProductList();},//获取产品列表getProductList(s0){this.setData({loading:true})queryProduct({navid:navid,size:s}).then(res{ let oldArr this.data.proArr;let newArroldArr.concat(res.data) console.log(res);this.setData({proArr:newArr,loading:false})if(res.total this.data.proArr.length){this.setData({isData:true})}})},//导航条切换事件navChange(e){ let index e?.detail?.index ?? e;navid this.data.navArr[index]._idthis.setData({proArr:[],loading:false,isData:false,navActive:Number(index)}) this.getProductList();},/*** 页面上拉触底事件的处理函数*/onReachBottom() {if(this.data.isData) return;this.getProductList(this.data.proArr.length)}
})三和四几乎一样就看前后端怎么约定的穿什么数据返回什么数据
