评论列表在popup弹窗中，分页无法使用onReachBottom监听到评论列表滚动到底部，所以手写

最新推荐文章于 2022-11-07 22:21:20 发布

翘板

最新推荐文章于 2022-11-07 22:21:20 发布

阅读量198

点赞数 1

分类专栏： vue移动手写微信聊天界面文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_61950846/article/details/125764443

版权

vue移动手写微信聊天界面专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<template>
	<view class="">
		<div id="scro" style="height:300px;overflow: auto;">
			<div style="margin-top:20px;background:#000" v-for="i in 20">{{i}}</div>
		</div>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: '',
				focusState: false
			}
		},
		beforeDestroy() {
			// 要进行函数卸载
			this.scroEl.removeEventListener('scroll', this.handleScroll)
		},
		mounted() {
			// this.dragJs()
			this.listenerFunction()
			var scroEl = document.getElementById('scro')
			this.scroEl = scroEl
		},
		methods: {
			// 监听滚动事件 scroEl是table外的div的dom
			listenerFunction(e) {
				var scroEl = document.getElementById('scro')
				scroEl.addEventListener('scroll', this.handleScroll, true)
			},
			handleScroll() {
				// scroel
				var scroEl = document.getElementById('scro')
				// 获取内容高度
				const scrollHeight = scroEl.scrollHeight
				// 获取滚动条纵坐标位置
				const scrollTop = scroEl.scrollTop
				// 我给的div高度是300px
				// 判断是否到底部是的话把数据push进去
				if (scrollHeight === scrollTop + 300) {
					console.log('aaaaaaaaaaaaaaaaaaaaaaaaaa')
				}
			},
		}
	}
</script>