Vue3左右切换带当前页码-附前端分页方法

html

<ul class="pageSize">
    <li><img src="./img/leftBack.png" alt="" @click="back()"></li>
	<li class="nowPage">{{currentPage}}</li>
	<li><img src="./img/rightNext.png" alt="" @click="next()"></li>
</ul>

js

allPageData.value 是前端处理以六个为一组的多级数组（见附录），通过[页码-1]角标赋值给当页数组currentPageData，数组结构如下：

 （如果接口数据是处理好的，可以直接调接口传页码值，或者角标选择当页数据）

let currentPage = ref(1); // 当前页码
let allPageData = ref([]) // 分组后的内容
let currentPageData = ref([]) //当前页显示内容

function back(){
	if (currentPage.value > 1) {
		currentPage.value--;
		currentPageData.value = allPageData.value[currentPage.value-1];
	}else{
		message.warning("没有上一页了");
	}
}

function next(){
	if (currentPage.value < allPageData.value.length) {
		currentPage.value++;
		currentPageData.value = allPageData.value[currentPage.value-1];
	}else{
		message.warning("没有下一页了");
	}
}

css

/* 上下页切换分页器 */
.pageSize{
	width: 100%;
	text-align: center;
}
.pageSize>li{
	display: inline-block;
}
.nowPage{
	margin: 0 8px;
	font-weight: bold;
	color: #5899fc !important;
    border-bottom: 2px solid #5899fc;
}

---

附左右切换图标

---

 附前端分页，平分数组数据方法：

for (var x = 0; x < Math.ceil(standardList.length / 6); x++) {
	var start = x * 6;
	var end = start + 6;
	allPageData.value.push(standardList.slice(start, end));
}

standardList：后台未处理数组

6（pageSize）：每页条数

standardList.slice(start, end):截取六个子数组为一组，push进新数组

注意：页码最小值为1，但数组角标最小值为0，所以选择数组时[页码-1]即为当前页数据；