uniapp中实现对象数组上一页下一页翻页，并前三名添加图片

样式比较简陋，请不要介意，功能是正常的

20231207_164739

<template>
	<view class="content">

		<button @click="prey">上一页</button>
		<button @click="next">下一页</button>
		<ul v-for="(item,index) in uls" :key="index">
			<li style="color: red;">{{item.img}}</li>
			<li>{{item.Name}}</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uls: [],
				//当前页数
				page: 1,
				//页面条数
				limit: 5,

				data: [{
					"UserID": 684,
					"Name": "王琴",
					"Total": 0
				}, {
					"UserID": 1461,
					"Name": "王宝印",
					"Total": 0
				},{
					"UserID": 1660,
					"Name": "赵欢欢",
					"Total": 0
				}, {
					"UserID": 1661,
					"Name": "杨超",
					"Total": 0
				}, {
					"UserID": 1662,
					"Name": "王海勇",
					"Total": 0
				}, {
					"UserID": 1663,
					"Name": "李莉",
					"Total": 0
				}, {
					"UserID": 1664,
					"Name": "浦国佳",
					"Total": 0
				}, {
					"UserID": 1665,
					"Name": "俞丽琅",
					"Total": 0
				}, {
					"UserID": 1666,
					"Name": "钱佳佳",
					"Total": 0
				}, {
					"UserID": 1667,
					"Name": "余卫娟",
					"Total": 0
				}, {
					"UserID": 1668,
					"Name": "章斐",
					"Total": 0
				}, {
					"UserID": 1669,
					"Name": "王剑",
					"Total": 0
				}, {
					"UserID": 1670,
					"Name": "朱静娜",
					"Total": 0
				}, {
					"UserID": 1671,
					"Name": "祝新明",
					"Total": 0
				}, {
					"UserID": 1672,
					"Name": "张怡平",
					"Total": 0
				}, {
					"UserID": 1673,
					"Name": "张颖龙",
					"Total": 0
				}, {
					"UserID": 1674,
					"Name": "徐晓培",
					"Total": 0
				}, {
					"UserID": 1675,
					"Name": "柳洪方",
					"Total": 0
				}, {
					"UserID": 1676,
					"Name": "丁彦军",
					"Total": 0
				}, {
					"UserID": 1677,
					"Name": "张帆",
					"Total": 0
				}, {
					"UserID": 1678,
					"Name": "陈辉",
					"Total": 0
				}, {
					"UserID": 1679,
					"Name": "黎曼",
					"Total": 0
				}, {
					"UserID": 1680,
					"Name": "吴佳妮",
					"Total": 0
				}, {
					"UserID": 1681,
					"Name": "费冬梅",
					"Total": 0
				}]
			}
		},
		onLoad() {
			this.aa()
		},
		methods: {
			aa() {

				var nowArr = this.data.slice((this.page - 1) * this.limit, this.page * this.limit);
				console.log(nowArr, 'nowArr');
				nowArr.forEach((el, index) => {
					if (index == 0 || index == 1 || index == 2) {
						el.img = '图片'
					} else {
						el.img = ''
					}

				})
				this.uls = nowArr
			},
			next() {
				if (this.page < Math.ceil(this.data.length / this.limit)) {
					this.page += 1; //没当点击一次页数加1
					var nowArr = this.data.slice((this.page - 1) * this.limit, this.page * this.limit);
					this.uls = nowArr
				} else {
					alert("已经到头了，没有更多页了")
				}
			},
			prey() {
				if (this.page > 1) {
					this.page -= 1; //没当点击一次页数减1
					var nowArr = this.data.slice((this.page - 1) * this.limit, this.page * this.limit);
					this.uls = nowArr
				} else {
					alert("前面没有页数了")
				}
			},



		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>