vue移动端分页

de_shy

已于 2022-11-07 12:24:58 修改

阅读量1.5k

点赞数

文章标签： vue.js javascript 前端

于 2020-05-11 11:20:46 首次发布

本文链接：https://blog.youkuaiyun.com/de_shy/article/details/106050236

版权

本文介绍了一个使用Vue和axios实现的一次请求全部数据后分页显示的例子。通过将所有数据保存在组件的数据属性中，每次点击加载更多时，从已获取的数据中切片展示，避免了多次请求。

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

vue 一次请求全部数据分页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 500px;
				background: skyblue;
				margin: 0 auto;
			}
			span{
				font-weight: bold;
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li v-for="(item,index) in list" :key="index">
					<p><span>{{index}}</span>{{item.body}}</p>
				</li>
			</ul>
			<!-- <button type="button" @click="moreShow">加载更多</button> -->
			<div class="">
				<button type="button" v-if="moreShowBoolen" @click="moreShow">点击加载更多</button>
				
				<div  v-else>
					已无更多
				</div>
			</div>

		</div>



	</body>
	
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#box',
			data: {
				list: [],
				allList:[],
				moreShowBoolen: false,
				nowPage: 1
			},
			methods: {
				async init() {
					var res = await axios.get('http://jsonplaceholder.typicode.com/posts');
					this.allList=res.data;//保存请求的所有数据
					if (res.data.length <= 20) { 
						this.list = res.data
						this.moreShowBoolen = false
					} else {
						this.list = res.data.slice(0, 20)
						this.moreShowBoolen = true

					}
					
					console.log(this.list)
					console.log(this.allList)
				},
				async moreShow() { 
					// var res = await axios.get('http://jsonplaceholder.typicode.com/posts');
					var  res = this.allList

					this.list = this.list.concat(res.slice(this.nowPage * 20, (this.nowPage + 1) * 20))

					this.nowPage++

					if (res.length >= this.nowPage * 20) {

						this.moreShowBoolen = true

					} else {

						this.moreShowBoolen = false

					}

				}
			},
			created() {
				this.init()
			},
			mounted() {

			},

		})
	</script>
</html>