uniapp-下拉刷新、点击加载、上拉加载

最新推荐文章于 2024-09-15 00:41:42 发布

橙蚊镜0819

最新推荐文章于 2024-09-15 00:41:42 发布

阅读量492

点赞数

分类专栏：小程序文章标签： uni-app

本文链接：https://blog.csdn.net/cwjxyp/article/details/130874462

版权

小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

该文章展示了如何在Vue.js应用中使用组件实现下拉刷新(refresher)和滚动到底部加载更多(loadmore)的功能。代码示例中包含了`u-navbar`用于导航，`scroll-view`用于滚动内容，并配置了相应的阈值和触发状态。同时，文章还涉及数据请求和状态管理，如列表加载状态的切换。

摘要由CSDN通过智能技术生成

<template>
	<view class="good-list">
		<u-navbar title="test page" :fixed="true" placeholder
			titleStyle="font-size:17px;font-weight: 500;color: #060606;" bgColor="rgba(0,0,0,0)" leftIcon=" "
			height="44px" @doubleClick="resetList"></u-navbar>

		<u-sticky offset-top="44">
			<text style="height:30px">此处是吸顶此处是吸顶此处是吸顶此处是吸顶此处是吸顶</text>
		</u-sticky>

		<!-- refresher-enabled:开启自定义下拉刷新 -->
		<!-- enable-back-to-top:iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向-->
		<!--  refresher-threshold:设置自定义下拉刷新阈值-->
		<!-- refresher-triggered:设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 -->
		<!-- @refresherrefresh:触发自定义下拉刷新 -->
		<!-- list-content:必须设置高度 -->
		<!-- @scrolltolower：滚动到距离底部多少触发事件 -->
		<scroll-view class="list-content" :scroll-y="true" :refresher-enabled="true" :enable-back-to-top="true"
			:refresher-threshold="100" :refresher-triggered="triggered" @refresherrefresh="refresh" @scrolltolower="testRefresh"
			V-if="list.length>0">
			<view class="card-view" v-for="(item, pos) in list" :key="pos">
				<view style="height: 40px;">{{item.goodsName}}</view>
			</view>
			<view class="card-last">
				<!-- loadStatus: 组件状态 loading / nomore-->
				<!--  -->
				<u-loadmore :status="loadStatus" @loadmore="loadmorea" />
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				param: {
					pageNum: 1,
					pageSize: 10,
					sourceType: 1
				},
				list: [],
				loadStatus: 'loadmore',
				triggered: false,
			}
		},
		onLoad(options) {
			this.getList()
		},
		methods: {
			getList() {
				this.$http({
					url: "/materialShop/getShop",
					data: this.param,
				}).then((res) => {
					//数据请求返回后从设刷新状态值
					this.triggered = false
					let data = res.data[0] || [];

					if (data.list && data.list.length) {
						if(this.param.pageNum == 1){
							this.list=[...data.list];
						}else{
							this.list.push(...data.list);
						}
						
						if (data.total <= data.pageNum * data.pageSize) {
							this.loadStatus = 'nomore';
						} else {
							this.loadStatus = 'loadmore';
						}
					} else {
						this.loadStatus = 'nomore';
					}
				});
			},
			loadmorea() {
				if (this.triggered) return;
				this.param.pageNum = this.param.pageNum + 1;
				this.loadStatus = 'loading';
				this.getList()
			},
			refresh() {
				this.triggered = true
				this.param.pageNum = 1
				this.getList()
			},
			testRefresh(){
				console.log('到底啦~~~~')
			}
		}
	}
</script>

<style>
	.list-content {
		height: 600px;
	}
</style>