uniapp下拉刷新和上拉请求

一、uniapp下拉刷新

• 在pages.json中为需要下拉刷新的页面添加enablePullDownRefresh为true
• 使用生命周期函数onPullDownRefresh配合request请求完成数据刷新

{
	"path": "pages/goods/goods",
	"style": {
		"enablePullDownRefresh": true
	 }
}

二、uniapp上拉请求

• 使用生命周期函数onReachBottom监听页面触底，并配合request请求完成数据刷新

三、具体实现代码如下

• 根据flag值修改“没有更多了”显示状态
• goods-list为封装的商品列表组件
• goods: [ ]用于存储商品列表信息
• pageindex数据分页，请求时需要携带pageindex
• $myRequest为uni.request(OBJECT) 的二次封装，点击此处直达相关文章

<template>
	<view class="goodBackground">
		<goods-list :goods="goods"></goods-list>
		<view class="isOver" v-if="flag">————— 没有更多了 —————</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		components: {
			"goods-list": goodsList
		},
		data() {
			return {
				goods: [],
				pageindex: 1,
				flag: false
			}
		},
		methods: {
			async getGoodsList(callBak) {
				const goodsList = await this.$myRequest({
					url: '/api/getgoods?pageindex=' + this.pageindex
				})
				this.goods = [...this.goods, ...goodsList.data.message]
				callBak && callBak()
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		onReachBottom() {
			if (this.goods.length < this.pageindex * 10) {
				this.flag = true
				return
			}
			this.pageindex++
			this.getGoodsList()
		},
		onPullDownRefresh() {
			this.goods = []
			this.pageindex = 1
			this.flag = false
			//此处使用定时器可查看出下拉刷新效果
			setTimeout(() => {
				this.getGoodsList(() => {
					uni.stopPullDownRefresh()
				})
			}, 1000)
		}
	}
</script>