小程序 uniApp 下拉刷新 上拉加载

一，小程序 uniApp 下拉刷新 上拉加载

在小程序和uniapp 中 可以通过 这个组件来实现 下拉刷新 和 上拉加载的功能 。官方文档

1. 通过配置 scroll-x 和 scroll-y 可以实现 横向 或纵向的滚动

封装需要被刷新的组件 ListView
​

封装需要被刷新的组件 ListView


   
       {{item.content}} 
    

  {{ finish ? '没有更多数据~' : '正在加载...' }} 

api 需求 一般会返回一个列表 包含 limit 条数 page 页数 totalPages 总页数(关键就是要这个总页数，去做判断)

const listData = ref([]) // 存放数据

const pageParams ={page:1,limit:10} // 请求分页数据

const finish = ref(false) // 结束标记

// 请求数据
async function getData() {
  if (finish.value) {
    return uni.showToast({ icon: 'none', title: '没有更多数据~' })
  }
  const result = await getListDataApi(pageParams)
  guessList.value.push(...result.items)
    // 判断总页数是否大于 请求的分页条数
  if (result.totalPages > pageParams.page) {
    // 大于 继续累加页数
    pageParams.page++
  } else {
     // 小于 停止累加 
    finish.value = true
  }
}

onMounted(() => {
  getData()
})

// 封装重置数据方法 
const resetData = () => {
  pageParams.page = 1
  listData.value = []
  finish.value = false
}

// 抛出方法
defineExpose({
  resetData,
  getData,
})

下拉刷新

1. 配置 refresher-enabled 开启自定义下拉刷新

2. 配置 refresher-triggered 设置下拉刷新的状态 （true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发）

3. 配置 @refresherrefresh 触发自定义下拉刷新

4. 下拉刷新的目的 就是 将数据重置更新 往往需要的操作 就是将 当前页面的数据重置 对于固定的数据 只需要重新发起一次请求 ，对于列表数据 只需要清空之前记录的数据 ，在页面更新时在发起请求

​
const isTriggered = ref(false) // 下拉刷新状态
​
 
   
    
   
 
​
​
​
const isTriggered = ref(false) // 下拉刷新状态
​
const listRef = ref(null) // 可以访问组件抛出的数据
​
// 触发下拉刷新 refresherrefresh
async function onRefresherrefresh() {
  // 开启动画 (就那三个 ... 的撒币动画)
  isTriggered.value = true
    
  // 重置猜你喜欢组件数据
  listRef.value.resetData()
  
   // 对其他要下拉更新的数据发起请求
 // await Promise.all([getHomeBannerData(), getCategoryData(), getHomeHot()])
​
  // 关闭动画
  isTriggered.value = false
}
​
​

上拉加载

1. enable-back-to-top 双击标题栏返回顶部

2. @scrolltolower 滚动到底部/右边，会触发 scrolltolower 事件

 
   
    
   
 
​
​
// 上拉加载  只需要 调用组件中 请求列表数据的方法
function onScrolltolower() {
  listRef.value.getData()
}

注意点

需要加上下面这几行 css 不然滚动刷新不触发