uniapp 上拉数据加载下拉刷新

uniapp 上拉数据加载下拉刷新

• 下拉刷新
  在pages.json的相应注册页面上添加

	"enablePullDownRefresh": true

然后在页面添加下拉事件

		onPullDownRefresh() { //下拉刷新
			var that = this
			var index = that.cindex
			this.check(index) //这里是请求数据事件
			uni.showToast({
				title: '刷新成功',
				icon: 'none'
			})
			uni.stopPullDownRefresh() //记得写上 不然会一直刷新
		},

• 上拉加载
  涉及的上拉加载更多的uni-load-more.vue组件，到官方组件里下载使用
  点击进入组件下载地址

  下载完成后就可以使用 ，在vue页面的数据后使用

<view v-show="isLoadMore"> 
	<uni-load-more :status="loadStatus"></uni-load-more>
</view>

js中

上拉触底事件

		onReachBottom() { //上拉触底函数

			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page += 1
				uni.showLoading({
					title: '加载中'
				})
				var that = this
				var index = that.cindex
				var UserInfo = uni.getStorageSync("UserInfo")
				var addrDel = uni.getStorageSync("addrDel")
				var page = that.page
				var state = index + 1
				//传入page请求数据
				let opts = {
					url: '/workerapi/order/myorder',
					method: 'post'
				};
				let params = {
					worker_id: UserInfo.id,
					page: page,
					state: state,
					lat: addrDel.latitude,
					lng: addrDel.longitude
				};
				that.$myRequest.httpTokenRequest(opts, params).then(res => {
					console.log(res.data);
					//打印请求返回的数据
					// that.orderlist = res.data.data
					uni.hideLoading()
					if (res.data.data) {
						this.dalist = this.dalist.concat(res.data.data)
						var that = this
						if (res.data.data.length < this.pagesize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
							that.isLoadMore = true
							that.loadStatus = 'nomore'
						} else {
							that.isLoadMore = false
						}
					} else {
						this.isLoadMore = true
						this.loadStatus = 'nomore'
					}
				}, error => {
					console.log(error);
				})
			}
		},

页面刷新时还原默认值

this.loadStatus = 'loading' //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
this.isLoadMore = false //是否加载中