uniapp监听滚动事件

最新推荐文章于 2025-03-13 12:15:24 发布

周不凢

最新推荐文章于 2025-03-13 12:15:24 发布

阅读量989

点赞数 1

文章标签： uni-app 小程序

本文链接：https://blog.csdn.net/qq_39047060/article/details/136681757

版权

本文介绍了如何在Vue应用中使用`scroll-view`组件实现滚动列表的下拉加载更多功能，展示了获取数据、设置页面高度以及监听滚动事件的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <scroll-view  scroll-y="true" :style="style" @scrolltolower="scrolltolower" @scroll="scroll">
        <nodata v-if="partymemberList.length == 0" />
	    <view class="activity_item" v-for="(item, index) in partymemberList" :key="index">
            <view>{{item.name}}</view>
        </view>
    </scroll-view>
</template>
<script>
	export default {
		data() {
			return {
				style:'height:calc(100vh - 220rpx)',
                total: 0,
				params: {
					pageNumber: 0,
					pageSize: 10,
					regionCode: wx.getStorageSync("regionCode"),
					sortType:'desc',
					sortColumn:'createTime',
				},
                partymemberList:[],
            }
        },
        onPageScroll(e) {
			// e.scrollTop 表示当前页面滚动的距离
            console.log('页面滚动距离：', e.scrollTop);
            // 在这里编写你的滚动相关逻辑
			this.style = 'height:calc(100vh - 220rpx)'
		},
        methods: {
			//下拉滚动监听事件
			scroll(e){
				console.log(e.detail.scrollTop)
				this.style = 'height:calc(100vh - 220rpx)'
			},
            / 上拉加载
			scrolltolower() {
				// 触底的时候请求数据，即为上拉加载更多
				var allTotal = this.params.pageSize * (this.params.pageNumber + 1)
				if (allTotal < this.total) {
					++this.params.pageNumber
					this.getPartyMemberList()//页面数据加载
				} else {
					uni.showToast({
						icon: 'none',
						title: '已加载全部数据'
					})
				}
			},
            getPartyMemberList(){
                
            }
        }
    }
</script>