效果：
效果.png
文件结构：
文件结构.png
index.hml
<element name='index-page' src='./index/index.hml'></element>
<element name='mine' src='./mine/mine.hml'></element>
<div>
<index-page if="{{activePage === 'index'}}"></index-page>
<mine if="{{activePage === 'mine'}}"></mine>
<toolbar style="position: fixed; bottom: 0px">
<toolbar-item style="text-color: {{ activePage===$item.page?'#288FFF':'#BBBBBB' }};" for="tabbarDes" icon='{{ activePage===$item.page? $item.activeImg:$item.normalImg }}' value='{{$item.txt}}' @click="showPage($item)"></toolbar-item>
</toolbar>
</div>
index.js
export default {
data: {
title: "",
activePage: "index",
tabbarDes: [
{
txt: '首页',
page: 'index',
normalImg: 'common/images/tabbar/index.png',
activeImg: 'common/images/tabbar/index-checked.png'
},
{
txt: '我的',
page: 'mine',
normalImg: 'common/images/tabbar/mine.png',
activeImg: 'common/images/tabbar/mine-checked.png'
},
]
},
onInit() {},
showPage(data) {
this.activePage = data.page
},
}
