vant tabbar组件图标导航冗余问题

vant tabbar组件图标导航冗余问题,第1张

使用vue-cli写项目时,用到了vant 里的tabbar组件,在点击不同的tab时,对应的tab标签颜色无法及时更新,控制台提示错误如下:

解决办法:

先来看vant 的tabbar组件:

tabbar组件使用了active值来控制标签的切换,默认active的值为0

效果如下:

在点击不同的标签进行route切换时,出现了冗余的问题,需要在尺扮created生命周期中重新获取一下active的值即可:

在这里使用了localStorage来存储active的值,只需要将localStorage里面的值获取到即可:

由于localStorage只能存储string类型慎唤的数据,所以在存储时可使用:

JSON.stringify(localStorage.setItem('a',_a))

想将其重新转换成js支宽困凯持的值,可使用

JSON.parse(localStorage.getItem('a')

因为要制作小程序左右页切换效果,用上vant的tab标签页袭模作为滑动效果还挺好的,但既然要全屏效果,就需要把整个顶部去掉,因官网没有直接隐藏的属性,所以得自己动手了

直接在你要隐藏拍悄缓主页的wxss文件中添加上该css即可(运册不保证以后也能用

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12375949.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存