做图像网站,国内新冠最新消息,查询网址在哪里查,网站没有被百度收录#x1f935; 作者#xff1a;coderYYY #x1f9d1; 个人简介#xff1a;前端程序媛#xff0c;目前主攻web前端#xff0c;后端辅助#xff0c;其他技术知识也会偶尔分享#x1f340;欢迎和我一起交流#xff01;#x1f680;#xff08;评论和私信一般会回#… 作者coderYYY 个人简介前端程序媛目前主攻web前端后端辅助其他技术知识也会偶尔分享欢迎和我一起交流评论和私信一般会回 个人专栏推荐《前端项目教程以及代码》 ✨一、前言
项目开发中如果请求后端数据过多我们一般会进行分页处理而在移动端我们一般是通过“上拉触底”这个动作加载下一页如果加载最后一页就进行提示。
二、具体实现
1.前期准备
后端需要一个分页的加载数据接口由前端传页码、条数 {PageIndex: 1, //页码PageSize: 20 //每页大小}2.wxml代码
页面显示分几种情况数据已部分加载、无数据、加载中、最后一页 !-- 渲染数据列表样式自己写我这里借助了vant宫格组件--view classlist wx:if{{dataList.length0}}van-grid column-num3van-grid-item use-slot wx:for{{ dataList}} wx:keyindexview classflex items-centerview classtext-container{{item.Goods_Name}}/view/view/van-grid-item/van-grid/viewview wx:elsevan-empty imagesearch description暂无数据 //view!-- 加载提示 --view wx:if{{loading}} classtips正在加载.../view!-- 没有更多数据的提示 --view wx:if{{!loading!hasMoreData}} classtips- 暂无更多数据 -/view3.js代码 data: {// 查询参数PageIndex: 1, //页码PageSize: 20, //每页大小loading: false,// 是否加载中hasMoreData: false,// 是否还有数据dataList: [],},onLoad() {this.getList()},// 请求数据getList() {// console.log(e.detail);wx.showLoading({title: 加载中,})dataGetPage({ // 后端接口已做了封装封装方法请看我之前发过的文章PageIndex: this.data.PageIndex, //页码PageSize: this.data.PageSize //每页大小}).then(res {if (res.Data) {// 请求成功将获取的数据拼接到原来的数据列表中const newDataList this.data.dataList.concat(res.Data);// 更新当前页数和数据列表this.setData({PageIndex: this.data.PageIndex 1,dataList: newDataList,});} else {this.setData({hasMoreData: false})if (this.data.dataList.length 0) {} else {this.setData({dataList: [],})}}this.setData({loading: false // 加载完成隐藏加载提示});setTimeout(() {wx.hideLoading()}, 500);})},// 触底onReachBottom: function () {// 调用加载下一页的方法this.loadNextPage();},// 在页面或组件中定义加载下一页数据的方法loadNextPage: function () {// 如果正在加载中避免重复加载if (this.data.loading) {return;}// 开始加载可以显示加载提示避免用户重复触发加载this.setData({loading: true});// 2. 发送请求获取下一页数据this.getList();},三、总结
原理其实就是检测触底就把页码1然后对数据进行拼接以上代码需根据实际应用进行修改。欢迎评论交流
