小程序P90 14.初步实现自定义的tabBar效果
4、自定义图标
<!--custom-tab-bar/index.wxml-->
<van-tabbar-item info="3">
<image
slot="icon"
src="{{ icon.normal }}"
mode="aspectFit"
style="width: 30px; height: 18px;" />
<image
slot="icon-active"
src="{{ icon.active }}"
mode="aspectFit"
style="width: 30px; height: 18px; />
自定义
</van-tabbar-item>
5、通过自定义的item项渲染页面的tabBar图标
// custom-tab-bar/index.js
data: {
active: 0,
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/one.png",
"selectedIconPath": "/images/one-ative.png"
},
{
"pagePath": "pages/massage/massage",
"text": "消息",
"iconPath": "/images/two.png",
"selectedIconPath": "/images/two-ative.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/three.png",
"selectedIconPath": "/images/three-ative.png"
} ]},