小程序 uniApp 下拉刷新上拉加载-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序 uniApp 下拉刷新上拉加载。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

通过配置 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,
})

下拉刷新

配置 refresher-enabled 开启自定义下拉刷新
配置 refresher-triggered 设置下拉刷新的状态（true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发）
配置 @refresherrefresh 触发自定义下拉刷新
下拉刷新的目的就是 将数据重置更新 往往需要的操作就是将当前页面的数据重置对于固定的数据只需要重新发起一次请求，对于列表数据 只需要清空之前记录的数据，在页面更新时在发起请求


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
}

上拉加载

enable-back-to-top 双击标题栏返回顶部
@scrolltolower 滚动到底部/右边，会触发 scrolltolower 事件文章来源地址https://www.toymoban.com/news/detail-755681.html

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

到了这里，关于小程序 uniApp 下拉刷新上拉加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！