【uniapp如何实现下拉刷新】

uniapp下拉刷新

方式一：pages.json自定义下拉刷新

pages.json配置：设置enablePullDownRefresh为true

 {
   "path": "case/index",
   "style": {
       "navigationBarTitleText": "更多案例",
       "enablePullDownRefresh": true
    }
},

page页面配置

import { onPullDownRefresh } from '@dcloudio/uni-app'
//下拉执行事件，在事件里面写你想要在下拉页面所执行的代码
const onRefresh=()=> {
    if (loadStatus.value === 'loading') return
    loadStatus.value = ''
    pageNum.value = 0
    list = []
    getList().finally(() => {
       uni.stopPullDownRefresh()
       //wx.stopPullDownRefresh()//微信小程序可这样写
    })
  }
onPullDownRefresh(() => {
  onRefresh()
})

方式二 ：srcoll-view自定义下拉刷新

srcoll-view组件配置

 <scroll-view
      scroll-y
      @scrolltolower="getList"//触底加载事件，想要实现上拉加载更多可写，不想实现莫写
      refresher-enabled 
      @refresherrefresh="onRefresh" //上拉刷新触发事件
      :refresher-triggered="triggered" //刷新状态,初值设为true会立即刷新一次
></scroll-view>

事件写法举例

const triggered=ref(false) //刷新状态,初值设为true会立即刷新一次
//下拉刷新
const refresher = () => {
  if (loadStatus.value === 'loading') return
  triggered.value = true
  loadStatus.value = ''
  pageNum.value = 0
  list.value = []
  getList().finally(() => {
    triggered.value = false
  })
}
//加载数据-上拉加载更多
const getList = async () => {
  if (['loading', 'nomore'].includes(loadStatus.value)) return
  loadStatus.value = 'loading'
  pageNum.value++
  const { data, code } = await uni.Requests.myOptionOrderList({
    pageNum: pageNum.value,
    pageSize: 20
  })
  if (code === 0) {
    list.value = list.value.concat(data.content)
    if (data.totalPages === pageNum.value || data.totalPages === 0)
      loadStatus.value = 'nomore'
  } else {
    pageNum.value--
  }
  if (loadStatus.value !== 'nomore') loadStatus.value = 'loadmore'
}