vue列表下拉触底加载_vue 下拉列表触底

作者：小丑西瓜9 | 2024-05-04 02:59:04

踩

vue 下拉列表触底


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>列表触底加载</title>
		<style>
			#main{width:600px;margin:20px auto;line-height:30px;}
			#main img{margin: 10px 0;}
		</style>
	</head>
	<body>
		<div id="main">
			<div class="list">
				<div style="border: 1px solid #eee; padding:20px;" v-for="(item,index) in data" :key="index">
					<div>{{item.title}}</div>
					<img :src="item.img" alt="图片" width="200" height="100" />
					<div>{{item.body}}</div>
				</div>
			</div>
			<div style="text-align:center;">loading</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			window.onload = function(){
				new Vue({
				el: '#main',
				data: {
					name: '测试',
					data: [], // 列表数据
					page: 0, // 页数
					rows: 5, // 每页行数
					url: 'http://192.168.101:3000/list/page', // 请求列表的接口
					endScreen: false // 是否到屏幕底部,如果到屏幕底部则变为true
				},
				created(){
					this.getData();
					// 监听页面的滚动事件
					window.onscroll = ()=>{
						this.endScreen = this.screenCheck();
					}
				},
				watch: {
					// 监听屏幕是否到达底部，如果是，则增加页数，加载数据
					endScreen(newValue,oldValue){
						if(newValue){
							this.page++;
							setTimeout(()=>{
								this.getData(this.page, this.rows);
							},1000)
						}
					}
				},
				methods: {
					// 请求数据的方法
					getData(page = this.page, rows = this.rows){
						//fetch是新一代XMLHttpRequest的一种替代方案。无需安装其他库。可以在浏览器中直接提供其提供的api轻松与后台进行数据交互。
						fetch(this.url+'?page='+page+'&rows='+rows,{ method:'GET' }).then(res=>{
							console.log(res);
							return res.json(); //返回promise对象
						}).then(res=>{ // 真实数据
							console.log(res);
							for(let i in res.data){
								if(res.data[i].img){
									var reg = '127.0.0.1';
									res.data[i].img = res.data[i].img.replace(/127.0.0.1/g,'192.168.101'); // 注意跨域请求
								}
								this.data.push(res.data[i]);
							}
						})
					},
					// 检测屏幕是否到达底部的方法
					screenCheck(){
						let screenH = Math.ceil(window.innerHeight+window.scrollY); // 屏幕高度+滚动高度	
						let eleH = document.documentElement.offsetHeight; // 网页正文全文高
						return screenH === eleH;
					}
				}
			})
			}
		</script>
	</body>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/532719