快捷導(dǎo)航

uni-app實現(xiàn)數(shù)據(jù)下拉刷新功能實例

更新時間：2022年08月02日 14:28:55 作者：船長在船上

很多列表頁總數(shù)量很大,一次性查詢加載會導(dǎo)致頁面有很長時間的空白期,自然體驗感極差,就會使用分頁加載數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于uni-app實現(xiàn)數(shù)據(jù)下拉刷新功能實例的相關(guān)資料,需要的朋友可以參考下

uni-app數(shù)據(jù)下拉刷新

在 pages.json 配置文件中，為當(dāng)前的 goods_list 頁面單獨開啟下拉刷新效果：

"subPackages": [{
  "root": "subpkg",
  "pages": [{
    "path": "goods_detail/goods_detail",
    "style": {}
  }, {
    "path": "goods_list/goods_list",
    "style": {
      "onReachBottomDistance": 150,
      "enablePullDownRefresh": true,
      "backgroundColor": "#F8F8F8"
    }
  }, {
    "path": "search/search",
    "style": {}
  }]
}]

監(jiān)聽頁面的 onPullDownRefresh 事件處理函數(shù)：

// 下拉刷新的事件
onPullDownRefresh() {
  // 1. 重置關(guān)鍵數(shù)據(jù)
  this.queryObj.pagenum = 1
  this.total = 0
  this.isloading = false
  this.goodsList = []
 
  // 2. 重新發(fā)起請求
  this.getGoodsList(() => uni.stopPullDownRefresh())
}

修改 getGoodsList 函數(shù)，接收 cb 回調(diào)函數(shù)并按需進行調(diào)用：

// 獲取商品列表數(shù)據(jù)的方法
async getGoodsList(cb) {
  this.isloading = true
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
  this.isloading = false
  // 只要數(shù)據(jù)請求完畢，就立即按需調(diào)用 cb 回調(diào)函數(shù)
  cb && cb()
 
  if (res.meta.status !== 200) return uni.$showMsg()
  this.goodsList = [...this.goodsList, ...res.message.goods]
  this.total = res.message.total
}

uni-app上拉加載更多功能:http://www.fzitv.net/article/257733.htm

附：uni.startPullDownRefresh(OBJECT)

通過 uni.startPullDownRefresh(OBJECT) 開始下拉刷新，調(diào)用后觸發(fā)下拉刷新動畫，效果與用戶手動下拉刷新一致。

<template>
	<view>
		<view v-for="(item,index) of list" :key="index">
			{{item}}
		</view>
		<button @click="pullDown">點擊觸發(fā)下拉刷新</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [1, 2, 3, 4, 5]
			}
		},
		methods: {
			pullDown() {
				//觸發(fā)下拉刷新
				uni.startPullDownRefresh()
			}
		},
		onPullDownRefresh() {
			console.log("觸發(fā)下拉刷新")
			setTimeout(() => {
				this.list = [1, 2, 3, 5, 3, 2]
				//關(guān)閉下拉刷新
				uni.stopPullDownRefresh()
			}, 2000)
		}
	}
</script>
<style>
</style>