vant自带的tab栏这里就不多说了写法如下:
<van-tabs v-model="active" swipeable @click="onClick">
<van-tab v-for="(item, index) in list" :key="index" :title="item.name">
</van-tab>
</van-tabs>
首先要请求首页数据,因为列表项的数据在首页
this.$axios.get("index_category/data").then((v) => {console.log(v)})
之后定位到首页的九个列表项赋给:title即可渲染
this.list = v.data.data.category;
之后要通过这九个数据进行获取数据,所以需进行遍历
let arr = [];
for (let i = 0; i < this.list.length; i++) {
// 遍历整个索引
console.log(i);
let forward = i === 0 ? "after" : "before"; // 判断当前索引是否为0,不为则跳转before
// console.log(forward);
var obj = {
list: [],
forward: forward,
};
if (i === 0) {
obj.list = v.data.data.data;
console.log(obj.list);
}
arr.push(obj);
this.newsItems = arr;
// console.log(this.newsItems);
}
打印的i如下:
这时新建一个变量forward用来单独分离首页数据,如果是首页则返回一个after,不是首页就返回before页面
打印的forward如下
之后创建一个对象obj'如下格式
var obj = {
list: [],
forward: forward,
};
obj格式如下图:
打印obj.forward则会显示有一个首页和多个分页
把obj中的空数组放在索引是0的判断里来对其obj.list添加获取的数据列表
也就是如下代码
obj.list = v.data.data.data;
接下来就是把obj对象放在arr的新数组中
arr.push(obj)
mounted部分暂时完成了,因为let arr作用域问题所以要重新放在一个新数组中
this.newsItems = arr;
点击获取分页数据实现
当点击tab栏是出现获取数据,因为vant中自带了name属性用来接收索引所以这里直接拿name即可
看所需代码:
onClick(name, title) {
console.log(name);
const btn = 1;
console.log(this.newsItems[name]);
if (this.newsItems[name].forward === "after") {
return;
} else {
var id = this.list[name].id
let obj = this.newsItems[name]
var page = Math.ceil(obj.list.length / 5) + 1
// console.log(id);
// console.log(page);
// console.log(obj); //obj获取到after以及before
obj.forward ='before'
console.log( obj.forward);
this.$axios.get(`/index_category/${id}/data/${page}`).then((v) => {
console.log(v);
obj.forward ='after'
console.log( obj.forward);
var data = v.data.data
obj.list = [...obj.list,...data]
console.log(obj.list);
});
}
/* if (name != 0) {
this.$axios.get(`/index_category/${name}/data/${btn}`).then((v) => {
console.log(v);
});
} */
},
这里详细说一下这一段代码
name和title打印出来的分别是索引值以及名称
下面可以直接拿上个声明周期中的
this.newsItems[name]
可以看到,当点击手机页面时会获取一个数据,里面有之前的before状态以及list空列表
这里再说一下before是除了首页的其他项,after是首页
这时就可以直接判断它里面的forward值是不是等于after?如果是,就直接算在首页中也就直接return掉,如果不是首页那么就获取分页数据
因为分页数据格式如下图所示
所以这里要匹配对应的id以及page才能成功获取数据
这时我们可以打印一下this.list,这里的list是mounted状态中获取的首页数据
获取每次点击对应的索引中的数据
this.list[name]
创建一个变量用来接收对应的id值,这个id值正好就是获取分页数据的重要信息id,如果没有这个id则无法获取对应的数据源
var id = this.list[name].id
获取完id就要在获取page即可完成
打印对应的对象
this.newsItems[name]
传给一个变量为obj
接下来就可以获取page了
这里数据只有一页所以我们这样计算即可
var page = Math.ceil(obj.list.length / 5) + 1
打印为1
接下来把所有的分页状态全部确定为before
obj.forward ='before'
然后请求数据
this.$axios.get(`/index_category/${id}/data/${page}`).then((v) => {
console.log(v);
});
成功获取第二页数据!
之后把所有的before变为after
获取到v.data.data的三个对象给个变量data
把空的obj.list与data进行合并
每次返回时不会重复提交 数据
用vant自带tab栏实现数据渲染
这里定义一个currentIndex用来接收index索引
这里封装一下分页数据