使用vux的tab选项卡下标位置不对

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

问题:

a2f35e919a6988049a1c5fec2698ec81d02.jpg

上图是一个tab,用的vuex中的组件,很明显的一个问题就是下面的下标位置不对。

打开控制台看样式,应该是默认进页面的时候,会去计算初始位置。

以上的tab选项卡的数据是接口请求回来的

tabList:[]

this.tabList=res.data;

这两句赋值代码应该是很熟悉了。贼6。

由于接口中,没有返回“全部”,所以,是自己拼接进去的

this.tabList.unshift({name:'全部',id:0})

这个也很好理解,但是下标位置依然不对。

突然回想起来,当初自己造数据来测试的时候,默认给的tabList

tabList: ["全部", "建档", "促排", "取  卵", "移植", "保胎"],

然后把初始数据填上,奇迹般的欧克了。。。

35578771d2bdbe82f4c7012f1f9e172351c.jpg

所以最终的结构,应该是这样的

//初始化数据
tabList: ["全部", "建档", "促排", "取卵", "移植", "保胎"]


//请求接口赋值
res.data.unshift({name:"全部",id:0})
this.tabList=res.data;

//然后你的tabList就可以完美的渲染上去了,牛皮!
 

也算踩坑吧。

==============================

这个应该是初始化渲染的时候,毕竟请求接口是需要时间的,但是默认下标已经去计算完了,接口数据还没有返回,导致的下标位置对(我猜的)

然后又去试了一下,发现初始化的时候,tabList只要给2个以上的值,就可以了,而且什么值都无所谓,如下:

//初始化数据(随便给2个就好了,给一个还不行)
tabList: [0,0]

 

转载于:https://my.oschina.net/u/3883810/blog/1829649

你可能感兴趣的:(使用vux的tab选项卡下标位置不对)