uniapp下拉刷新和上拉加载更多

酸菜鱼很好吃哦1

已于 2022-09-28 13:47:13 修改

阅读量1.8k

点赞数

文章标签： uni-app javascript 前端

于 2022-09-28 13:45:24 首次发布

本文链接：https://blog.youkuaiyun.com/m0_50663823/article/details/127087916

版权

本示例提供了一个使用uni-app实现的下拉刷新和上拉加载更多功能的代码模板。通过调整状态和数据加载逻辑，可以轻松地为列表组件添加刷新和加载更多功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<!-- 下拉刷新和上拉加载更多模板 uniapp 作者@cy -->
	<view class="load_more">
		<div style="background-color: antiquewhite;text-align: center;font-size: 24rpx; color: gray;">下拉刷新数据</div>
		<div v-for="item in dataList" style="height: 280rpx;border-bottom: 1px solid red;">
			{{item.id}}
		</div>
		<uni-load-more :status="status" :icon-size="14" :content-text="contentText" v-if="dataList.length > 0" />
	</view>

</template>

<script>
	import {
		getDataList
	} from '@/api/product'

	export default {
		data() {
			return {
				dataList: [
					{
						id: 1
					},
					{
						id: 1
					},{
						id: 1
					},{
						id: 1
					},{
						id: 1
					},{
						id: 1
					},{
						id: 1
					}
				],
				totalCount: 14, //接口请求到的数据量(展示数据用页码形式)，
				params:{
					curretPage: 0, //页码
					pageSize: 10 //页大小
				},
				reload: false, //刷新标志符
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},
			}
		},
		onLoad(){
			
		},
		onPullDownRefresh() {
			//初始化信息
            this.dataList = []
			this.params.curretPage = 0,
			this.pageSize = 10
			this.reload = true
			setTimeout(() => {
				this.getData()
			}, 1000)
		},
		onReachBottom() {
			if (this.totalCount > this.dataList.length) {
				this.status = 'loading';
				setTimeout(() => {
					this.getData(); //执行的方法
				}, 1000) //这里我是延迟一秒在加载方法有个loading效果，如果接口请求慢的话可以去掉
			} else { //停止加载
				this.status = 'noMore'
			}
		},
		methods: {
			getData(){
				// getDataList({
				// 	page: this.params.curretPage+1, //请求页码每次＋1
				// 	pageSize: this.params.pageSize
				// }).then(res => {
				// 	this.totalCount = res.total
				// 	if (res.total > 0) {
				// 		const dataMap = result.data.list
				// 		this.dataList = this.reload ? dataMap : this.dataList.concat(dataMap);
				// 		this.reload = false;
				//		this.status = 'more'
				// 	} else {
				// 		this.dataList = [];
				// 	}
				// 	if (this.totalCount == this.dataList.length) {
				// 		this.reload = false;
				// 		this.status = 'noMore'
				// 	}
				// })
				let mockData = [
					{
						id:2
					},
					{
						id:2
					}
				]
				this.dataList = this.dataList.concat(mockData)
				this.status = 'more'
				console.log(this.dataList,23333)
				uni.stopPullDownRefresh()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.load_more{
		height: 100%;
	}
</style>

page.json配置

{
			"path": "pages/test/scrollTab",
			"style": {
				"navigationBarTitleText": "scrollTabTest",
				"disableScroll": true,
				"app-plus": {
					"bounce": "none"
				}
			}
		},