uniapp scroll-view实现上拉加载 下拉刷新的效果_scroll-view下拉刷新

话不多说直接上代码

布局代码

<scroll-view scroll-y="true" class="scroll-view-class" :style="'height:' + scroll_height+';width:694rpx;'"
				:scroll-top="scrollTop" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="onRefresh"
				@scrolltolower="lower">
<view></view>//这里是你自己的item list
</scroll-view>

需要注意的是 scroll-view一定要给固定高度 根据自己的需求进行计算得到即可

js部分的代码

data(){
return{
scrollTop: 0,
				isEnd: false,
				triggered: false,
				isfreshing: false,
				isShowList: true,
}
},
methods: {
			//请求数据的方法
			pageGetUsedCarSearchMyReleaseList() {
				var that = this
				this.isRefresher = true
				getUsedCarSearchMyReleaseList(getApp().globalData.user_id, this.page_num, this.page).then(res => {
					uni.showLoading({})
					that.$nextTick(() => {
						if (that.page == 1) {
							that.meSearchCarListData = []
							that.meSearchCarListData = res.data.data
							that.triggered = false
							that.isfreshing = false
						} else {
							for (var i = 0; i < res.data.data.length; i++) {
								that.meSearchCarListData.push(res.data.data[i]); // 加载的数据追加在上一页后面
							}
							that.isEnd = false
						}
						that.last_page = res.data.last_page
						that.$forceUpdate()
						if (that.last_page == that.page) {
							that.isShowMore = true
						} else {
							that.isShowMore = false
						}
						uni.hideLoading({})
					})
 
				})
			},
 
			onRefresh() {
				if (!this.triggered) {
					if (this.isfreshing) return;
					this.isfreshing = true;
					if (!this.triggered) {
						this.triggered = true;
					}
					this.page = 1
					this.$utils.log("触发下拉刷新  第1个  111111 refresherrefreshFun")
					this.pageGetUsedCarSearchMyReleaseList()
				}
			},
 
			lower() {
				if (!this.isShowMore) {
					if (!this.isEnd) {
						this.isEnd = true
						if (this.page < this.last_page) {
							this.page = this.page + 1
							this.pageGetUsedCarSearchMyReleaseList()
						} else {
							this.$utils.log("没有数据了")
						}
 
					}
				}
			}
		}

不懂的地方可以留言