Vue 列表点击下一页 上一页 示例代码
export default {
data() {
return {
//获取来的数据储存
pageData:'',
// 总页数
pageCount:'',
// 当前页码
pageNum:'',
//当前是第一页
selectPage:1
}
},
created(){
this.query();
},
methods:{
//上一页
mstop(){
this.selectPage = this.selectPage - 1
if(this.selectPage<=1){
this.selectPage =1
alert("当前已是第一页")
}else{
this.query(this.selectPage)
}
},
//下一页
msbottom(){
this.selectPage = this.selectPage + 1
if(this.selectPage >= this.pageCount){
alert("当前最后一页")
}else{
this.query(this.selectPage)
}
}
,
query(num){
let that = this;
let historyPagevo={
};
//需要获取的数据条数
historyPagevo['pageSize'] = 13
// 需要传的参数
historyPagevo["entyVo"]={
"zylmiputIdval":""};
historyPagevo["selectPage"]=num;
this.$axios({
method:'请求方式（POST或GET）',
url:'接口地址',
headers: {
"Content-Type": "application/json;charset=utf-8" }, //即将被发送的自定义请求头
withCredentials: true ,//即将被发送的自定义请求头
data:historyPagevo
}).then(res => {
//清空上一次的数据
this.pageData = []
// 获取数据
this.pageData = res.data[0].pageList
//在第一次进入页面的是加载当前第一页的数据
this.itemId(this.pageData[0].STORYCONTEXT)
// 获取所有的数据的总页数
this.pageCount=res.data[0].pageCount
console.log( res.data[0]);
}).catch(error => {
// console.log(res.data)
//请求失败返回的数据
});
}
},
因为我后台给我传的数据方式不一定所义我在获取数据的时候this.pageData = res.data[0].pageList，在Data后面加了【0】，可以再获取前看下控制台打印出来的数据
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/36179.html
