uniapp 实现上拉加载下拉刷新

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

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

组件名：uni-load-more 用于列表中，做滚动加载使用，展示 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()
			}
		}
	}