普通写法vantUI 使用字体图标和文字<template>l;
<van-tabbar v-model="active" active-color="#07c160">l;
<van-tabbar-item :to="{普通写法vantUI 使用字体图标和文字<template>
<van-tabbar v-model="active" active-color="#07c160">
<van-tabbar-item :to="{name:'home'}">
<span>首页</span>
<img
slot="icon"
slot-scope="props"
:src="props.active ? icon.homeActive : icon.homeNormal"
>
</van-tabbar-item>
<van-tabbar-item :to="{name:'money'}">
<span>钱包</span>
<img
slot="icon"
slot-scope="props"
:src="props.active ? icon.moneyActive : icon.moneyNormal"
>
</van-tabbar-item>
<van-tabbar-item :to="{name:'user'}">
<span>个人中心</span>
<img
slot="icon"
slot-scope="props"
:src="props.active ? icon.userActive : icon.userNormal"
>
</van-tabbar-item>
</van-tabbar>
</template>
<script>
export default {
data() {
return {
active: 0,
icon:{
homeNormal: require('./home.png'),
homeActive: require('./homeActive.png'),
moneyNormal: require('./money.png'),
moneyActive: require('./moneyActive.png'),
userNormal: require('./user.png'),
userActive: require('./userActive.png'),
},
}
}
}
</script>手写 适用于背景图等复杂样式<template>
<div class="footer">
<div class="foot">
<router-link
v-for="(item,i) in footnavs"
:key="i"
:to="item.to"
:class="{'selected':($route.meta.nav_index==item.nav_index)}"
>
<img :src="$route.meta.nav_index==item.nav_index?item.selected:item.no_selected" alt>
<span v-show="!($route.meta.nav_index==item.nav_index)">{{item.name}}</span>
</router-link>
</div>
</div>
</template>
<script>
export default {
data() {
return {
footnavs: [
{
to: "/",
name: "首页",
no_selected: require("@img/home/shouye@2x.png"),
selected: require("@img/home/shouye2@2x.png"),
nav_index: 1
},
{
to: "/money",
name: "钱包",
no_selected: require("@img/home/qianbao@2x.png"),
selected: require("@img/home/qianbao2@2x.png"),
nav_index: 2
},
{
to: "/my",
name: "个人中心",
no_selected: require("@img/home/gerenhzongxin@2x.png"),
selected: require("@img/home/gerenzhongxin@2x.png"),
nav_index: 3
}
]
};
}
};
</script>
<style lang="less" scoped>
.footer {
width: 100%;
height: 98px;
margin-top: 12px;
.foot {
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
padding: 10px 20px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 1px 16px 0px rgba(192, 192, 192, 0.4);
a {
width: 33%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
img {
width: 47px;
height: 47px;
}
span {
font-size: 28px;
color: rgba(102, 102, 102, 1);
}
&.selected {
img {
width: 85px;
height: 85px;
}
}
}
}
}
</style>路由文件import Vue from 'vue'
import Router from 'vue-router'
import home from '@/pages/home/home'
import noticeList from '@/pages/home/noticeList'
import money from '@/pages/money/money'
import my from '@/pages/my/my'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'home',
component: home,
meta: {
index: 0,
hasFooter: true,
nav_index: 1
},
},
{
path: '/money',
name: 'money',
component: money,
meta: {
index: 0,
hasFooter: true,
nav_index: 2
},
},
{
path: '/my',
name: 'my',
component: my,
meta: {
index: 0,
hasFooter: true,
nav_index: 3
},
},
{
path: '/noticeList',
name: 'noticeList',
component: noticeList,
meta: {
index: 1,
hasBar: true,
},
},
],
//该方法用于控制滚动行为，
scrollBehavior(to, form, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})app.vue文件<template>
<div id="app">
<tabBar v-show="$route.meta.hasBar"/>
<transition :name="transitionName">
<router-view/>
</transition>
<Footer v-show="$route.meta.hasFooter"/>
</div>
</template>
<script>
import "./common/css/common.css";
// bug:不能为小写footer会报错
import Footer from "@/components/footer";
import tabBar from "@/components/tabBar";
export default {
name: "App",
data() {
return {
transitionName: ""
};
},
components: {
Footer,
tabBar
},
mounted() {},
watch: {
/*
* 使用watch 监听$router的变化
* 如果to索引大于from索引,判断为前进状态,反之则为后退状态
* 设置动画名称
*/
$route(to, from) {
if (to.meta.index == from.meta.index) {
this.transitionName = "";
} else if (to.meta.index > from.meta.index) {
this.transitionName = "slide-left";
} else {
this.transitionName = "slide-right";
}
}
}
};
</script>