目录
1.标签页切换
src\App.vue
<div class="container">
……(原有代码)
<tabbar></tabbar>
</div>
导入:
<script>
import tabbar from './components/tabbar.vue'
export default {
components: {
tabbar
}
}
</script>
src\components\tabbar.vue
<template>
<nav class="mui-bar mui-bar-tab">
<router-link class="mui-tab-item-lib" :to="{name: 'home'}">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</router-link>
<router-link class="mui-tab-item-lib" :to="{name: 'category'}">
<span class="mui-icon mui-icon-personadd"></span>
<span class="mui-tab-label">分类</span>
</router-link>
<router-link class="mui-tab-item-lib" :to="{name: 'shopcart'}">
<span class="mui-icon mui-icon-extra mui-icon-extra-cart">
<span class="mui-badge">2</span>
</span>
<span class="mui-tab-label">购物车</span>
</router-link>
<router-link class="mui-tab-item-lib" :to="{name: 'user'}">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">我的</span>
</router-link>
</nav>
</template>
相关路由创建出来:
src\router.js
import Home from './pages/Home.vue'
import Category from './pages/Category.vue'
import Shopcart from './pages/Shopcart.vue'
import User from './pages/User.vue'
将页面组件放在pages目录。
而components目录用来放公共组件(在后面会创建一些公共组件,保存在这个目录下)。
routes: [
{ path: '/', redirect: '/home', meta: { title: '首页' } },
{ path: '/home', component: Home, name: 'home', meta: { title: '首页' } },
{ path: '/category', component: Category, name: 'category', meta: { title: '分类' } },
{ path: '/shopcart', component: Shopcart, name: 'shopcart', meta: { title: '购物车' } },
{ path: '/user', component: User, name: 'user', meta: { title: '我的' } },
],
删除已经用不到的src\components\HelloWorld.vue
创建4个标签页对应的组件文件:
src\pages\Home.vue
<template>
<div>首页</div>
</template>
src\pages\Category.vue
<template>
<div>分类</div>
</template>
src\pages\Shopcart.vue
<template>
<div>购物车</div>
</template>
src\pages\User.vue
<template>
<div>我的</div>
</template>
页面结果:
美化样式:
src\components\tabbar.vue
<style scoped>
.mui-bar-tab .mui-tab-item-lib.mui-active {
color: #007aff
}
.mui-bar-tab .mui-tab-item-lib {
display: table-cell;
overflow: hidden;
width: 1%;
height: 50px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
color: #929292;
}
.mui-bar-tab .mui-tab-item-lib .mui-icon {
top: 3px;
width: 24px;
height: 24px;
padding-top: 0;
padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item-lib .mui-icon ~ .mui-tab-label {
font-size: 11px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<style scoped>
.mui-bar-tab .mui-tab-item-lib.mui-active {
color: #007aff;
}
.mui-bar-tab .mui-tab-item-lib {
display: table-cell;
overflow: hidden;
width: 1%;
height: 50px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
color: #929292;
}
.mui-bar-tab .mui-tab-item-lib .mui-icon {
top: 3px;
width: 24px;
height: 24px;
padding-top: 0;
padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item-lib .mui-icon ~ .mui-tab-label {
font-size: 11px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
效果:
设置激活样式:
src\router.js
var router = new VueRouter({
routes: [
……(原有代码)
],
linkActiveClass: 'mui-active'
})
激活后的效果:
2.动画效果
src\App.vue
在<router-view>外面加上动画
<transition name="fade">
<router-view></router-view>
</transition>
在<style>中添加样式:
.fade-enter {
opacity: 0;
transform: translateX(100%)
}
.fade-leave-to {
opacity: 0;
transform: translateX(-100%);
position: absolute;
}
.fade-enter-active, .fade-leave-active {
transition:all .5s ease;
}
测试动画效果。
3.返回按钮
src\App.vue
<div class="container">
<mt-header fixed :title="$route.meta.title">
<span slot="left" @click="goBack" v-show="showBack">
<mt-button icon="back">返回</mt-button>
</span>
</mt-header>
</div>
export default {
data() {
return {
showBack: false
}
},
created () {
this.showBack = this.$route.path !== '/home'
},
watch: {
'$route.path' (newVal) {
this.showBack = newVal !== '/home'
}
},
methods: {
goBack() {
this.$router.go(-1)
},
},
……(原有代码)
}
查看返回按钮是否会显示出来
4.拓展题
(一)对全局样式进行修改,例如:把蓝色主色调改成红色或其他自己喜欢的颜色。
(二)对底部的标签栏增加“发现”选项(类似京东APP),从原来的4个变成5个。
(三)对标签页的过渡动画效果进行修改,改成自己喜欢的效果。
文章(一)的链接: