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

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

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

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

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

封装需要被刷新的组件 ListView

<view class="list">
   <navigator class="list-item"  v-for="item in listData" :key="item.id" :url="item.url">
       <view>{{item.content}} </view>
    </navigator>
</view>
 <view class="loading-text"> {{ finish ? '没有更多数据~' : '正在加载...' }} </view>

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) // 下拉刷新状态
​
 <scroll-view 
    scroll-y
    refresher-enabled
    :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh"
 >
   
    <ListView ref="listRef"></ListView>
   
 </scroll-view>
​
​
​
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 事件

 <scroll-view 
    scroll-y
    enable-back-to-top
    @scrolltolower="onScrolltolower"
 >
   
    <ListView ref="listRef"></ListView>
   
 </scroll-view>
​
​
// 上拉加载  只需要 调用组件中 请求列表数据的方法
function onScrolltolower() {
  listRef.value.getData()
}

注意点

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

<style lang="scss">
// css 要加 不然滚动刷新不触发
page {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;
}
​
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
​
.scroll-view {
  flex: 1;
  overflow: hidden;
}
</style>