vant的Tabbar標簽欄https://youzan.github.io/vant/#/zh-CN/tabbar
在app開發中，這個必不可少，上一張講了怎么引入iconfont圖標，現在就將iconfont圖標引入到tabbar標簽欄里邊，看着vant提供的圖標，必將有點丑啊23333，接下來就是引入方法：
1. 首先引入tabbar
2. 以基礎代碼為例
我現在就把這個第一個圖標換掉，換成iconfont圖標
第一個圖標標簽為<van-tabbar-item icon="home-o">標簽</van-tabbar-item>
把這行代碼換成如下：
<van-tabbar-item>
<van-icon class="iconfont" class-prefix='icon' slot="icon" slot-scope="props" :name='props.active ? icon.home_active:icon.home_normal'></van-icon>
<span>home</span>
</van-tabbar-item>
相應的，js代碼為：
slot-scope="props" 這個屬性就是用來判斷圖標是不是被選中的，
這是官方文檔的原話。
:name='props.active ? icon.home_active:icon.home_normal' 這行代碼的意思就是
當 props.active 為 true，說明處於選中狀態，此時會調用名稱 icon.home_active，如果不在選中狀態，那么會調用名稱 icon.home_normal，通過 查看js代碼，可以知道，icon.home_active 就是 home，icon.home_normal 就是 homefill
之所以是這個名稱，那是因為
可以看見iconfont矢量圖的名稱就是home 和 homefill，這可不是我隨便取的，要看看你想調用的iconfont圖標名稱是啥
於是，:name='props.active ? icon.home_active:icon.home_normal 還可以這么理解：
當處於選中狀態的時候，調用 homefill圖標 ，不是選中狀態的是，調用home圖標
接下來看看效果：
處於選中狀態的時候，
不是選中狀態的時候，
這么一來就可以實現 iconfont圖標的自由切換了，隨心所欲，可能有些小伙伴想要改變顏色，這個其實很簡單，官方文檔就有修改顏色的方法：https://youzan.github.io/vant/#/zh-CN/tabbar
我把處於選中狀態的時候顏色變成 hotpink，一個很騷的顏色
這就是效果圖，好騷啊23333
方法分享就到這里了，其實如果想有實際應用的話，應該要加上路由模式，這樣一個Tabbar標簽欄才算是一個比較完美的Tabbar標簽欄。
————————————————
版權聲明：本文為CSDN博主「傻她你呀」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_41672008/article/details/91040018