微信截圖_20220816090042.png
由于是引入的第三方iconfont的字體圖標(biāo),此時又需要遍歷出來鲸湃,那么如何遍歷iconfont呢赠涮?此時就用到了unicode。如 &#x轉(zhuǎn)為\u暗挑,就變成了\ue614
- template部分
<view
v-for="(item,index) in tabBars"
:key="index"
:class="tabIndex===index?'active':''"
@click="changeTab(index)"
>
<view
class="iconfont icon-box"
:style="{background:item.color1}"
>
{{item.icon}}
</view>
{{item.name}}
</view>
data中
data() {
return {
tabBars: [{
name: '專題',
icon: '\ue614',
color1: '#398ADE'
},
{
name: '知識',
icon: '\ue666',
color1: '#18BC37'
},
{
name: '活動',
icon: '\ueb8f',
color1: '#F0AD4E'
},
{
name: '課程',
icon: '\ue727',
color1: '#398ADE'
},
],
tabIndex: 0,
}
},