uni-app 上拉加载与下拉刷新

使用 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>