<div class="btn">
<div @click="addpage" :class="selet == 0 ? 'btnColor':''">上一页</div>
<div @click="redpage" :class="selet == 1 ? 'btnColor':''">下一页</div>
</div>
代码 :class="selet == 0 ? 'btnColor':''" 这两个是控制按钮的样式
data() {
return {
tableData:[], //获取储存的数据
//分页的数据参数
total: 0, //总条数
listsum:6, //每页显示多少条
page:1, //当前页
pagecount:null,
selet:0,//用来判断按钮，状态，改变样式btnColor
imgarry:[],
};
},
首先获取总数据
huoqu(){
// this.zt = true
this.service.get('/get_message.php',{
params:{ //page 是页码 limit 是每页数量
limit:this.listsum, //是因为后端接口需用传入的参数获取返回值
page:this.page
}
}).then(res=>{
if(res.data.code == 200){
let count = res.data.count
this.tableData = res.data.data
this.pagecount = Math.ceil(count/this.listsum)
}
})
},
created(){
this.huoqu();
},
接下来，实现上一页按钮的方法addpage功能业务
addpage() {
console.log("上一页")
if (this.page>1) {
this.page = this.page-1
this.service.get('/get_message.php',{
params:{
limit:this.listsum,
page:this.page
}
}).then(res=>{
this.tableData = res.data.data
this.selet = 0
}).catch((err)=>{
console.log(err);
})
return
}
},
接下来实现下一页方法redpage的功能业务
redpage() {
console.log("下一页")
if (this.pagecount>this.page ) {
this.page = this.page+1
this.service.get('/get_message.php',{
params:{
limit:this.listsum,
page:this.page
}
}).then(res=>{
this.tableData = res.data.data
this.selet = 1
})
return false
}else if (this.pagecount>this.page ) {
this.page = this.page+1
this.service.get('get_notify.php',{
params:{
limit:this.listsum,
page:this.page
}
}).then(res=>{
this.tableData = res.data.data
this.selet = 1
})
return false
}
}
这样的话，就完成了，代码拷贝的时候，可以直接使用，请求的接口的service是我自己封装的代理的js文件，若是没有封装的话，可以直接改成axios 自行使用就行
