uniapp 实现上拉加载下拉刷新

uniapp项目中 实现上拉加载、下拉刷新

需下载uniapp插件: uni-load-more 加载更多

组件名:uni-load-more 用于列表中,做滚动加载使用,展示 loading 的各种状态

!用于列表中,做滚动加载使用,展示 loading 的各种状态

效果:

在这里插入图片描述

1.在需要实现效果的配置文件pages.json中添加代码:enablePullDownRefresh":true

{
				"path" : "pages/myappointmentmodule/index",
				"style" : 
				{
					"navigationBarTitleText" : "我的预约",
					//下拉刷新
					 "enablePullDownRefresh":true
				}
			},

2.页面内容

	<view v-if="isLoadMore">
			<uni-load-more iconType="circle" :status="loadStatus" ></uni-load-more>
	</view>

3.js代码

export default {
		data() {
			return {
				page: 1,//页码
				limit: 10,//每页显示几条数据
				sort: 'starttime-desc',
				appUser: '',
				authority: 'STUDENT',
				schoolAcademy: '0001',
				reservList: [],//列表数据
				loadStatus: 'noMore', //加载样式:more-加载前样式,loading-加载中样式,noMore没有数据样式
				isLoadMore: false, //是否加载中
				

			};
		},
		onLoad() {
			this.getList()
			uni.removeStorageSync('detail')
		},
		methods: {
			navToDetail(item) {
				uni.setStorageSync('detail',item)
				uni.navigateTo({
					url: '../myappointmentdetail/index?id='+item.uid
				})
			},
			// 获取预约列表
			getList() {
			//发送请求,按自己的来写,该传多少参数就传多少
				const params = {
					page: this.page,
					limit: this.limit,
					sort: this.sort,
					appUser: uni.getStorageSync('userInfo').username,
					authority: this.authority,
					schoolAcademy: this.schoolAcademy,

				}
				this.$api.getReservation(params).then(res => {
					console.log(res, '预约列表')
					if (res.code == 0) {
						const data = res.data
						if (data.length != 0) {
						//首次获取10条数据 后续将返回的数据拼接到之前已获取到的数组后
							this.reservList = this.reservList.concat(data)
							 //判断接口返回数据量小于请求数据量,则表示此为最后一页
							if (data.length < this.limit) {
								this.isLoadMore = true
								this.loadStatus = 'noMore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.loadStatus = 'noMore'
						}

					} else {
					//提示
						this.$Common.tipMsg(res.msg)
					}
				})
			},
			// 上拉触底函数
			onReachBottom() {
				if (!this.isLoadMore) {
					this.isLoadMore = true
					this.page++ //下拉一次页数+1
					this.getList()
				}
			},
			//下拉刷新
			onPullDownRefresh() {
				//重新触发获取数据方法,刷新接口
				this.reservList = []	
				this.page = 1//重置页码,每次刷新后页码均为第一页
				this.getList()
				//结束刷新
				uni.stopPullDownRefresh()
			}
		}
	}
  • 25
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值