admin 管理员组文章数量: 887021
样式比较简陋，请不要介意，功能是正常的
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>
版权声明：本文标题：uniapp中实现对象数组上一页下一页翻页，并前三名添加图片 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1729801101h1354605.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论