Vue 列表下一页 上一页
Vue 列表点击下一页 上一页 示例代码export default {data() {return {//获取来的数据储存pageData:'',// 总页数pageCount:'',// 当前页码pageNum:'',//当前
·
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】,可以再获取前看下控制台打印出来的数据
更多推荐
已为社区贡献3条内容
所有评论(0)