style="current==index?'color:#ffffff':''">{{item.text}}</text>
</view>
</view>
<view class="tabbar-item-box" v-else>
<image class="item-img" :src="current == index?item.iconPath:item.icon"></image>
<text class="item-text" :class="current == index?'item-text-active':''">{{item.text}}</text>
</view>
</view> </view>
</template>
pages.json文件
"tabBar": {
"color": "#999999",
"selectedColor": "#1DD9A9",
"backgroundColor": "#ffffff",
"iconWidth": "24px",
"borderStyle": "white",
"height": "120px",
"list": [{
"pagePath": "pages/tabbar/home/index",
// "iconPath": "static/tabbar/home.png",
// "selectedIconPath": "static/tabbar/home_a.png",
"text": "Home"
},
{
"pagePath": "pages/tabbar/synthesis/index",
// "iconPath": "static/tabbar/home.png",
// "selectedIconPath": "static/tabbar/home_a.png",
"text": "synthesis"
},
{
"pagePath": "pages/tabbar/invite/index",
// "iconPath": "static/tabbar/home.png",
// "selectedIconPath": "static/tabbar/home_a.png",
"text": "Synthesis"
},
{
"pagePath": "pages/tabbar/mine/index",
// "iconPath": "static/tabbar/mine.png",
// "selectedIconPath": "static/tabbar/mine_a.png",
"text": "Mine"
},
{
"pagePath": "pages/tabbar/game/index",
// "iconPath": "static/tabbar/mine.png",
// "selectedIconPath": "static/tabbar/mine_a.png",
"text": "Game"
}
]
},
"pages/tabbar/game/index" 文件 引用
<template>
<view>
<web-view src="/hybrid/html/index.html" @message="getMessage">
</web-view>
<!-- 转盘抽奖弹窗 -->
<raffled-popup :show="raffledShow"></raffled-popup>
<!-- VIP弹窗 -->
<vip-popup :show="VipShow" @open="vipOpen" @close="vipClose"></vip-popup>
<!-- 排行榜弹窗 -->
<ranking-list :show="rankShow" @open="rankOpen" @close="rankClose"></ranking-list>
<Tabbar :current="'2'"></Tabbar>
</view>
</template>
附件图片就是 h5可以 APP内部直接覆盖
