判断一个div内滚动是否触底加载内容

最新推荐文章于 2023-11-17 11:38:49 发布

XPX17

最新推荐文章于 2023-11-17 11:38:49 发布

阅读量394

点赞数

分类专栏： vue javascript 文章标签： javascript vue.js elementui

本文链接：https://blog.youkuaiyun.com/qq_35547053/article/details/125147401

版权

javascript 同时被 2 个专栏收录

12 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

这是一个关于在Vue中使用scroll-view组件实现滚动到底部加载更多内容的示例。当用户滚动到视图底部时，如果还有更多数据，会调用get_list()方法加载下一页内容，并显示提示。如果数据已全部加载，则显示'没有更多了'的提示。

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

//html
<scroll-view scroll-y="true" @scroll.passive="getScroll($event)" style="height:330px;margin-top: 30rpx;">
	<view class="gongshi-list" v-for="(item,index) in aginList">
		<view class="gongshi-list-name">{{item.name}}</view>
		<view class="gongshi-list-text">{{item.title}}</view>
		<view class="gongshi-list-money">￥{{item.money}}</view>
	</view>
</scroll-view>


//js
getScroll(event) {
    let me = this
	let scrollTop = event.target.scrollTop //滚动的距离
	let scrollHeight = event.target.scrollHeight  //内容的高度
	if (scrollHeight === scrollTop + 330) {
		console.log("到底了")
		if (me.aginList.length < me.pages * 6) {
				return me.$refs.uTips.show({
					title: '没有更多了',
					type: 'error'
				});
			}
			me.pages++
			me.get_list()
		}
},