[TOC] ### 使用 onPullDownRefresh与onReachBottom实现上拉加载与下拉刷新 onReachBottom的官方介绍：https://uniapp.dcloud.net.cn/tutorial/page.html#onReachBottom onPullDownRefresh的官方介绍： https://uniapp.dcloud.net.cn/api/ui/pulldown.html#onpulldownrefresh #### onPullDownRefresh 在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。 - 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。 - 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。 ``` { "path": "pages/circles/index", "style": { "navigationBarTitleText": "成长圈", "navigationStyle": "custom", // 开启 enablePullDownRefresh "enablePullDownRefresh": true, } }, ``` #### onReachBottom 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance， 比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。比如下面把onReachBottomDistance距离配置为100 ``` { "path": "pages/circles/index", "style": { "navigationBarTitleText": "成长圈", "navigationStyle": "custom", "enablePullDownRefresh": true, "onReachBottomDistance": 100 } }, ``` ### 在vue3中监听上述的两个方法 ``` <script setup lang="ts"> import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app' // 上拉刷新 onPullDownRefresh(() => { console.log("上拉刷新！") }) // 下拉加载下一页 onReachBottom(() => { console.log("下拉加载！") }) ``` ### 基础的使用 ``` <template> <view class="container"> <view> ......解析数据 </view> <uni-load-more :status="state.pageInfo.lmStatus" /> </view> </template> <script setup lang="ts"> import { ref, reactive } from 'vue' import http from '@/common/request.ts' import { onShow } from '@dcloudio/uni-app' import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app' const state = reactive({ pageInfo: { totalCount: 0, totalPage: 0, lmStatus: 'more', pageIndex: 1, pageSize: 6, } }) // 上拉刷新 onPullDownRefresh(() => { state.pageInfo.pageIndex=1 state.dataList = [] // 刷新的时候要清空掉原有的数据 getDataList() }) // 下拉加载下一页 onReachBottom(() => { state.pageInfo.pageIndex++ if (state.pageInfo.pageIndex <= state.pageInfo.totalPage) { getDataList() } }) onShow(() => { getDataList() }) const getDataList = async () => { state.pageInfo.lmStatus = 'loading' var res: any = await http.get('/growing/api/StuTaskPhone/GrowingCircles', { PageIndex:state.pageInfo.pageIndex, PageSize: state.pageInfo.pageSize }) console.log("看看请求的数据....", res) // state.dataList = res.data.data // 没有数据就是赋值即可 if(state.dataList.leng===0) { state.dataList = res.data.data } // 有数据就是追加 else { state.dataList = [...state.dataList,...res.data.data] } state.pageInfo.totalCount = res.data.dataCount state.pageInfo.totalPage = Math.ceil(res.data.dataCount / state.pageInfo.pageSize) if (state.pageInfo.pageIndex >= state.pageInfo.totalPage) state.pageInfo.lmStatus = 'noMore' else state.pageInfo.lmStatus = 'more' } </script> ```