vue分页
方法一:
直接在页面引入组件
<template>
<div class="page-bar">
<ul>
<li v-if="cur > 1">
<a v-on:click="cur--, pageClick()">{{ LANG.test1.desc152 }}</a>
</li>
<li v-if="cur == 1">
<a class="banclick">{{ LANG.test1.desc152 }}</a>
</li>
<!--当前页背景色为蓝色-->
<li
v-for="index in indexs"
:key="index"
v-bind:class="{ active: cur == index }"
>
<a v-on:click="btnClick(index)">{{ index }}</a>
</li>
<li v-if="cur != all">
<a v-on:click="cur++, pageClick()">{{ LANG.test1.desc153 }}</a>
</li>
<li v-if="cur == all">
<a class="banclick">{{ LANG.test1.desc153 }}</a>
</li>
<li>
<a
>{{ LANG.test1.desc154 }}<i>{{ all }}</i
>{{ LANG.test1.desc155 }}</a
>
</li>
</ul>
</div>
</template>
<style lang="less" scoped>
.page-bar {
width: 90%;
padding: 1rem;
margin: 0 auto;
}
ul,
li {
margin: 0rem;
padding: 0rem;
}
li {
list-style: none;
}
.page-bar li:first-child > a {
margin-left: 0rem;
}
.page-bar a {
border: 0.01rem solid #ddd;
text-decoration: none;
position: relative;
left: 1%;
// margin-top: 10%;
float: left;
padding: 0.06rem 0.12rem;
// margin-left: -0.01rem;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer;
}
.page-bar a:hover {
background-color: #eee;
}
.page-bar a.banclick {
cursor: not-allowed;
}
.page-bar .active a {
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.page-bar i {
font-style: normal;
color: #d44950;
margin: 0rem 0.04rem;
font-size: 0.12rem;
}
</style>
<script>
export default {
props: {
url: ""
},
data() {
return {
all: 10, //总页数
cur:1, //当前页码
totalPage: 0,
};
},
mounted() {
this.dataListFn();
},
methods: {
//请求数据
dataListFn: function (index) {
console.log(this.url, "=================");
this.$axios
.get(this.url, {
params: {
num: 0,
currentPage: this.cur,
// page: index,
// limit: "10",
// state: 0
},
})
.then((res) => {
console.log(res, "==");
if (res.status == 200) {
this.dataList = res.data.data.dataList;
// for (let i = 0; i < res.data.data.dataList.length; i++) {
// this.dataList.push(res.data.data.dataList[i]);
// }
console.log(this.dataList, "22");
this.all = res.data.data.totalPage; //总页数
this.cur = res.data.data.currentPage;
this.totalPage = res.data.data.pageSize;
this.$emit('change', this.dataList);
// this.curNum = this.cur;
}
console.log(res);
console.log(res.data.data.totalPage);
console.log(this.all);
});
},
//分页
btnClick: function (data) {
console.log(this.cur, "qq");
//页码点击事件
if (data != this.cur) {
this.cur = data;
console.log(this.data );
}
//根据点击页数请求数据
this.dataListFn(this.cur.toString());
},
pageClick: function () {
//根据点击页数请求数据
this.dataListFn(this.cur.toString());
},
},
computed: {
indexs: function () {
var left = 1;
var right = this.all;
var ar = [];
if (this.all >= 5) {
//这里最大范围从3到6,如果到达7,那么下边加2变成9,已经超过最大的范围值
if (this.cur > 3 && this.cur < this.all - 2) {
//以4为参考基准,左面加2右边加2
left = this.cur - 2;
right = this.cur + 2;
} else {
if (this.cur <= 3) {
left = 1;
right = 5;
} else {
right = this.all;
left = this.all - 4;
}
}
}
while (left <= right) {
ar.push(left);
left++;
}
console.log(ar);
return ar;
},
},
};
</script>
方法二:
多个页面需要分页
①在main.js写
const REQ_URL = { //api地址
petList: "/website/pet",
recently: "/website/recently",
PersonalPet: "/website/PersonalPet" ,
}
Vue.prototype.URL_LIST = REQ_URL;
②页面html引入组件
<Fenye :url="this.URL_LIST.petList" v-on:change="change1"></Fenye>
③在script
methods:{
change1(value) {
console.log(value, "aa");
console.log(this.curNum, "num");
console.log(this.dataList, "dataList");
this.dataList = value; // this.curNum = value;//组件传参
console.log("=============");
},
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战