持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

上拉加载更多

我们之前已经讲了下拉刷新、上拉加载。我们根据之前学习过的课程写就可以了

要想实现上拉加载更多，就要监听onReachBottom事件，让当前页 +1，再次请求商品列表数据，把数据追加到当前 goods 数据中即可

为了更好的展示数据，我们修改 getGoodsList方法，传入参数 query 来搜索关键词"宝宝零食"，pagesize来限定每页加载10条数据，pagenum来限定请求第几页的数据

在 data 中增加变量 curPage 来方便修改页码

我们在页面增加一个 view，在数据加载完成时展示“我是有底线的”，用变量 flag 来表示展示与否，开始为 false，不展示。当数据加载完成时，修改为 true，展示

如何判断数据是否加载完成呢？正常情况下会返回总页数，用总页数和当前页数作比较即可得出是否加载完成，由于我们的测试数据没有返回总页数，我们可以换一种方式判断，由于我们每页加载10条数据，同时也知道当前页码，所以可以根据当前全部 goods 数据的长度和当前页面*10 作比较即可

我们来看下整个过程：当上拉页面触底时，onReachBottom被调用，判断数据是否加载完成，如果加载完成，把 flag 置为 true，展示“我是有底线的”，return，不走下面的加载数据代码；如果没有加载完成，则把当前页 +1，同时调用获取数据列表方法即可

<template>
	<view>
		<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 {
		data() {
			return {
				goods:[],
				curPage:1,
				flag:false
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		components:{
			'goods-list':goodsList
		},
		methods: {
			async getGoodsList(){
				const res = await this.$myRequest({
					url:'/api/public/v1/goods/search',
					data:{
						query:'宝宝零食',
						pagesize:10,
						pagenum:this.curPage,
					}
				})
				this.goods = [...this.goods,...res.data.message.goods]
			}
		},
		onReachBottom() {
			if(this.goods.length < this.curPage*10) return this.flag = true
			this.curPage++
			this.getGoodsList()
		}
	}
</script>

<style lang="scss">
.goods_list{
	background: #eee;
}
.isOver{
	width: 100%;
	height: 50rpx;
	line-height: 50rpx;
	background: #eee;
	text-align: center;
	font-size: 28rpx;
}
</style>

运行程序：在这里插入图片描述

下拉刷新

要实现下拉刷新，首先需要在 pages.json 中增加 enablePullDownRefresh

		{
            "path" : "pages/goods/goods",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "商品列表",
				"enablePullDownRefresh": true
            } 
        }

然后修改 goods.vue

......

<script>
	......
	export default {
		......
		methods: {
			async getGoodsList(callback) {
				......
				this.goods = [...this.goods, ...res.data.message.goods]
				callback && callback()
			}
		},
		......
		onPullDownRefresh() {
			this.curPage = 1
			this.flag = false
			this.goods = []
			setTimeout(()=>{
				this.getGoodsList(()=>{
					uni.stopPullDownRefresh()
				})
			},1000)	
		}
	}
</script>
......

运行程序：

在这里插入图片描述

【uni-app从入门到实战】上拉加载、下拉刷新

上拉加载更多

下拉刷新