uniapp 上拉加载&下拉刷新
demo-1.页面方法直接操作
<script> export default { data() { return { listQuery: { pageNo: 1, pageSize: 10, }, //分页 list: [], //列表 totalPage: 1 //当前页 }; }, onLoad() { this._orderRecord() }, methods: { /*获列表 * @params this.listQuery 分页数据 */ _orderRecord() { let that = this; if (this.listQuery.pageNo === 1) this.list = []; this.$api.api.orderRecord(this.listQuery).then(res => { setTimeout(function() { uni.hideLoading();
uni.stopPullDownRefresh(); that.list = that.list.concat(res.list); that.totalPage = res.totalPage }, 500); }); }, /* 上拉加载 */ onReachBottom() { uni.showLoading({ title: '加载中' }); if (this.totalPage <= this.listQuery.pageNo) { uni.hideLoading(); uni.showToast({ title: '没有更多了', duration: 2000, icon: 'none' }); return } this.listQuery.pageNo += 1; this._orderRecord() }, /* 下拉刷新 */ onPullDownRefresh() { this.listQuery.pageNo = 1; this._orderRecord(); }, } }; </script>
demo-2.搭配全局设置和声明周期方法
// 1.pages.json配置 { "path": "banner/index/index", "style": { "navigationBarTitleText": "XXXXX", "enablePullDownRefresh": true } },
// 声明变量条件 data(){ return{ // 收到的 listData: [],//信息list listAll: 0,//信息总数 listPage: 1,//请求页数 listLoading: false,//是否正在加载 } }
// method 方法获取列表信息 receivedLetter() { // 停止刷新请求条件 if (this.listData && this.listData.length !== 0 && this.listData.length >= this.listAll) { uni.stopPullDownRefresh() return } this.listLoading = true//开始请求 this.$api.getMyDetailData({ biz_id: this.$store.state.user_biz_id,//参数根据业务需求 ptype: "get", page: this.listPage,//重点是这个会变的请求页码 limit: 10 }).then(res => { console.log("请求", res) this.listLoading = false //请求完成 this.listData.push(...res.data) //追加数据 uni.stopPullDownRefresh() //停止刷新 }) },
// 首次加载&监听触底上拉和下拉 mounted() { uni.startPullDownRefresh() }, // 下拉触底函数 onReachBottom() { //加载中就不进行加载 if (this.listLoading) { return } else { //加载下一页 this.receivedLetter()//第一次的时候listPage=1 this.listPage++ } }, // 监听下拉更新 （重新获取第一页信息） onPullDownRefresh() { //初始化信息 this.listPage = 1 this.listLoading = false this.listData = [] this.listAll = 0 this.receivedLetter() },
demo-3. mescroll 组件（以下为无需配置pages.json vue2示例，想要配置全局.json属性参考官网）
官网地址：http://www.mescroll.com/uni.html
// 在具体页面中的示例 (vue2) // vue3实例用法参考官网 <template> <view> <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"> // @init="mescrollInit" @down="downCallback" @up="upCallback"为固定值,不可删改(与mescroll-mixins保持一致) // :down="downOption" :up="upOption" 绝大部分情况无需配置 // :top="顶部偏移量" :bottom="底部偏移量" :topbar="状态栏" :safearea="安全区" (常用) // 此处支持写入原生组件 <view v-for="data in dataList"> 数据列表... </view> </mescroll-body> <view>fixed元素需写在mescroll-body的外面,否则下拉刷新时会降级为absolute <view> </view> </template> <script> // 引入mescroll-mixins.js import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"; import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本 import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 非uni_modules版本 export default { mixins: [MescrollMixin], // 使用mixin components: { MescrollBody }, data() { return { mescroll: null, // mescroll实例对象 (此行可删,mixins已默认) // 下拉刷新的配置(可选, 绝大部分情况无需配置) downOption: { ... }, // 上拉加载的配置(可选, 绝大部分情况无需配置) upOption: { page: { size: 10 // 每页数据的数量,默认10 }, noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示 empty: { tip: '暂无相关数据' } }, // 列表数据 dataList: [] } }, methods: { /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/ mescrollInit(mescroll) { this.mescroll = mescroll; }, /*下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认) downCallback(){ this.mescroll.resetUpScroll(); }, /*上拉加载的回调*/ upCallback(page) { // 此处可以继续请求其他接口 // if(page.num == 1){ // // 请求其他接口... // } // 如果希望先请求其他接口,再触发upCallback,可参考以下写法 // if(!this.isInitxx){ // apiGetxx().then(res=>{ // this.isInitxx = true // this.mescroll.resetUpScroll() // 重新触发upCallback // }).catch(()=>{ // this.mescroll.endErr() // }) // return // 此处return,先获取xx // } let pageNum = page.num; // 页码, 默认从1开始 let pageSize = page.size; // 页长, 默认每页10条 uni.request({ url: 'xxxx?pageNum='+pageNum+'&pageSize='+pageSize, success: (data) => { // 接口返回的当前页数据列表 (数组) let curPageData = data.xxx; // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8) let curPageLen = curPageData.length; // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3) let totalPage = data.xxx; // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26) let totalSize = data.xxx; // 接口返回的是否有下一页 (true/false) let hasNext = data.xxx; //设置列表数据 if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表 this.dataList = this.dataList.concat(curPageData); //追加新数据 // 请求成功,隐藏加载状态 //方法一(推荐): 后台接口有返回列表的总页数 totalPage this.mescroll.endByPage(curPageLen, totalPage); //方法二(推荐): 后台接口有返回列表的总数据量 totalSize //this.mescroll.endBySize(curPageLen, totalSize); //方法三(推荐): 您有其他方式知道是否有下一页 hasNext //this.mescroll.endSuccess(curPageLen, hasNext); //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页. //如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据 //如果传了hasNext,则翻到第二页即可显示无更多数据. //this.mescroll.endSuccess(curPageLen); // 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如 // 建议使用setTimeout,因为this.$nextTick某些情况某些机型不触发 setTimeout(()=>{ this.mescroll.endSuccess(curPageLen) },20) // 上拉加载的 curPageLen 必传, 否则会一直显示'加载中...': 1. 使配置的noMoreSize 和 empty生效 2. 判断是否有下一页的首要依据: 当传的值小于page.size时(说明不满页了),则一定会认为无更多数据; 比传入的totalPage, totalSize, hasNext具有更高的判断优先级; 3. 当传的值等于page.size时(满页),才取totalPage, totalSize, hasNext判断是否有下一页 传totalPage, totalSize, hasNext目的是避免方法四描述的小问题 // 提示: 您无需额外维护页码和判断显示空布局,mescroll已自动处理好. // 当您发现结果和预期不一样时, 建议再认真检查以上参数是否传正确 }, fail: () => { // 请求失败,隐藏加载状态 this.mescroll.endErr() } }) }, /*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/ reloadList(){ this.mescroll.resetUpScroll(); } } } </script>
