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

<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"
				}
			}
		},

最后

以上就是害怕唇彩为你收集整理的uniapp下拉刷新和上拉加载更多的全部内容，希望文章能够帮你解决uniapp下拉刷新和上拉加载更多所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。