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

最新推荐文章于 2024-08-05 15:56:48 发布

Mark.1024

最新推荐文章于 2024-08-05 15:56:48 发布

阅读量1.1k

点赞数

分类专栏： uniapp 小程序开发学习 web 文章标签： uni-app

本文链接：https://blog.csdn.net/ahualong1/article/details/130997676

版权

uniapp 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

小程序开发学习

1 篇文章 0 订阅

订阅专栏

web

1 篇文章 0 订阅

订阅专栏

该文章展示了如何在微信小程序中使用scroll-view组件实现滚动效果，并结合JavaScript处理数据加载、下拉刷新和上拉加载更多功能。关键代码包括设置scroll-view的样式和事件监听，以及在方法中处理数据请求和状态更新。

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

话不多说直接上代码

布局代码

<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("没有数据了")
						}

					}
				}
			}
		}

不懂的地方可以留言