html 使用 vue 实现翻页功能

<script type="text/javascript">
    var app = new Vue({
	el: '#app',
	data: {
		page: 1, //初始化当前页
		endpage: 2, //假数据，默认总共两页数据
		loading: true, //是否为加载中状态
	},
	mounted() {
		// 滚动监听触发scrollBottom事件
		window.addEventListener("scroll", this.scrollBottom, true);
	},
	methods: {
		// 滚动监听
		scrollBottom() {
		// 	滚动到页面底部时翻页功能，当前页小于总页数时触发
			if (this.page < this.endpage) {
				const el = document.getElementById("app"); //滚动对象
				const windowHeight = window.screen.height;
				const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				const contentHeight = el.clientHeight;
				const toBottom = contentHeight - windowHeight - scrollTop;
				if (toBottom < 10 && !this.loading) {
					this.loading = true; //触发滚动机制，加载状态改变
					this.page++ //当前页加1
				}
			}
		},
})

</script>