<template>
|
<footer class="f-footer">
|
<tabbar>
|
<tabbar-item @on-item-click="handlerItemClick" :selected="selectIndex === 0" link="/home">
|
<i slot="icon" class="iconfont icon-home"></i>
|
<i slot="icon-active" class="iconfont icon-home-fill"></i>
|
<span slot="label">首页</span>
|
</tabbar-item>
|
<tabbar-item @on-item-click="handlerItemClick" :selected="selectIndex === 1" link="/assessment">
|
<i slot="icon" class="iconfont icon-loan"></i>
|
<i slot="icon-active" class="iconfont icon-loan-fill"></i>
|
<span slot="label">信用</span>
|
</tabbar-item>
|
<tabbar-item @on-item-click="handlerItemClick" :selected="selectIndex === 2" link="/news">
|
<i slot="icon" class="iconfont icon-news"></i>
|
<i slot="icon-active" class="iconfont icon-news-fill"></i>
|
<span slot="label">资讯</span>
|
</tabbar-item>
|
<tabbar-item @on-item-click="handlerItemClick" :selected="selectIndex === 3" link="/advisory">
|
<i slot="icon" class="iconfont icon-wang"></i>
|
<i slot="icon-active" class="iconfont icon-wangfill"></i>
|
<span slot="label">咨询</span>
|
</tabbar-item>
|
</tabbar>
|
</footer>
|
</template>
|
|
<script>
|
/**
|
* Created by c.y on 2018/3/20.
|
* 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
|
* IOS上架的全局的footer
|
* selectIndex number类型 选中的那个tab
|
*/
|
import { Tabbar, TabbarItem } from 'vux'
|
|
export default {
|
name: 'f-footer',
|
data () {
|
return {
|
selectIndex: 0
|
}
|
},
|
components: {
|
Tabbar,
|
TabbarItem,
|
},
|
methods: {
|
handlerItemClick (index) {
|
this.selectIndex = index;
|
}
|
},
|
props: {
|
index: {
|
type: Number,
|
default: 0
|
}
|
},
|
activated: function () {
|
this.selectIndex = this.index;
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.f-footer {
|
.iconfont {
|
font-size: 24PX;
|
}
|
}
|
</style>
|
