index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--谷歌浏览器（手机端）顶部颜色--> <meta name="msapplication-TileColor" content="#4183fd"> <meta name="theme-color" content="#4183fd"> <!-- 如果不设置maximum-scale=1.0, user-scalable=0就会导致底部tabbar偶发性不响应transition缓动效果 --> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <!-- 浏览器顶部标题栏图标 --> <link rel="shortcut icon" type="image/x-icon" href="./static/favicon.ico"> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
src/js/main.js
//【基础配置】---------------------------------------------------------------- //引入Vue框架（设置为false以阻止vue在启动时生成生产提示） import Vue from 'vue'; Vue.config.productionTip = false; //导入路由【安装方法】cnpm i vue-router import VueRouter from 'vue-router'; Vue.use(VueRouter); import routes from './routes'; const router = new VueRouter({ scrollBehavior: (to, from, savedPosition) => { return { x: 0, y: to.meta.scrollTop || 0 }; //进入该页面时，用之前保存的滚动位置赋值 }, routes }); router.isDirectAccess = false; //是否直接访问（通常是通过超链接访问） router.goBack = () => { if (router.isDirectAccess) { router.push('/'); //如果直接访问，返回都直接跳转到根目录 } else { router.isToRight = true; //页面从左往右滑动 history.back(); //后退+刷新（为了某些页面重新登录的时候自动回到最顶端） // history.go(-1); //后退 } }; router.beforeEach((to, from, next) => { router.isDirectAccess = from.name === null || from.path === to.path || from.path === "/"; //是否直接访问（譬如通过网址直接访问） from && (from.meta.scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop); //进入该页面时，记录上一个路由页面的滚动位置 router.title = document.title = to.meta.title || ''; //路由发生变化修改页面title //判断跳转到一级页面 if (to && to.meta && to.meta.tabbarIndex !== null && to.meta.tabbarIndex !== undefined) { if (from && from.meta && from.meta.tabbarIndex !== null && from.meta.tabbarIndex !== undefined) { //在一级页面之间切换 router.isFade = true; //淡入淡出 //router.isToRight = to.meta.tabbarIndex < from.meta.tabbarIndex;//判断在一级页面的时候，点击底部菜单左右移动方向，这里的tabbarIndex是在meta里定义的索引，用于判断菜单顺序 } else { //从内页 → 一级页面 router.isToRight = true; } } if (router.isFade) { router.transitionName = 'fade' } else { router.transitionName = router.isToRight ? "slide-right" : "slide-left"; //朝右滑动→、←朝左滑动 } router.isFade = false; //重置淡入淡出 router.isToRight = false; //重置朝左的方向 next(); }); //【第三方插件】---------------------------------------------------------------- //引入es6-promise【安装方法】cnpm i es6-promise --save-dev import promise from 'es6-promise'; //使用axios对安卓或者ios低版本兼容性处理 promise.polyfill(); //注意需要在aixo之前注册 //引入jquery【安装方法】cnpm i jquery --save-dev import $ from 'jquery'; Vue.prototype.$ = $; //引入Axios【安装方法】cnpm i axios -S //建议暂时不要大面积使用Axios，我严重怀疑手机端它的兼容性问题！！！ /* import axios from 'axios'; Vue.prototype.$axios = axios; */ //引入Vant【安装方法】cnpm i vant -S import Vant from 'vant'; import 'vant/lib/index.css'; import 'vant/lib/icon/local.css'; //解决离线无网络环境中使用icon不显示的问题 Vue.use(Vant); // 引入Vant 图片懒加载模块 import { Lazyload } from 'vant'; Vue.use(Lazyload); //引入Echarts【安装方法】cnpm i echarts -S import echarts from 'echarts'; Vue.prototype.$echarts = echarts; //【公共方法】---------------------------------------------------------------- import sg from "./sg"; Vue.prototype.$g = sg; import sd from './sd'; Vue.prototype.$d = sd; //【公共变量】---------------------------------------------------------------- import global from "./global"; Vue.prototype.$global = global; //【初始化加载】---------------------------------------------------------------- import App from '../vue/App'; new Vue({ el: '#app', render: h => h(App), router });
src/vue/App.vue
<template> <div id="sg-app" :class="tabbars.includes($route.path)?'sg-home':'sg-inner'"> <!-- 内页 --> <transition :name="$router.transitionName"> <router-view class="sg-router"></router-view> </transition> <van-tabbar v-model="active" active-color="#4183fd" inactive-color="#666"> <van-tabbar-item icon="wap-home-o" to="/home">首页</van-tabbar-item> <van-tabbar-item icon="medal-o" to="/by">毕业</van-tabbar-item> <van-tabbar-item icon="records" to="/jy">就业</van-tabbar-item> <van-tabbar-item icon="contact" to="/wd" info="8">我的</van-tabbar-item> </van-tabbar> </div> </template> <script> export default { data() { return { active: 0, tabbars: [] }; }, watch: { $route(to, from) { this.active = this.tabbars.indexOf(this.$route.path); //根据路由判断高亮显示的底部菜单 } }, created() { // 从全局路由配置里面提出底部一级菜单的路由 var arr = this.$router.options.routes; for (var i = 0, len = arr.length; i < len; i++) { var a = arr[i]; a.meta && a.meta.index !== null && a.meta.index !== undefined && this.tabbars.push(a.path); } } }; </script> <style lang='scss' scoped> @import "~@/css/common"; @mixin transformXY($x: 0, $y: 0) { -webkit-transform: translate($x, $y); transform: translate($x, $y); } #sg-app, .sg-router { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } .sg-router, .van-tabbar { transition: 0.2s ease-out; -moz-transition: 0.2s ease-out; -webkit-transition: 0.2s ease-out; -o-transition: 0.2s ease-out; -khtml-transition: 0.2s ease-out; } .van-tabbar:after { border: none; box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.05); } //在首页（底部有tabBar）的时候 .sg-router { background: #f2f2f2; //内页背景色浅灰 } .sg-home { .sg-router { background: white; //首页背景色白色 } .van-tabbar { @include transformXY(); //显示底部菜单 } // 在首页的时候切换效果变成 淡入淡出 透明度 .fade { &-enter, &-leave-active { opacity: 0; } } } //在内页的时候 .sg-inner { .van-tabbar { @include transformXY(0, 100%); //隐藏底部菜单 } } .slide-left { &-enter { @include transformXY(100%, 0); //←朝左移入时的起始位置 } &-leave-active { @include transformXY(-30%, 0); //←朝左移出时的结束位置 } } .slide-right { &-enter { @include transformXY(-100%, 0); //朝右→移入时的起始位置 } &-leave-active { @include transformXY(30%, 0); //朝右→移出时的结束位置 } } // 自定义全局控件样式---------------------------------------------------------------- // 顶部navbar蓝色背景+白色文字 >>> .van-nav-bar { background-color: #4586fe; .van-icon, .van-nav-bar__title { color: white; } } // 标签默认浅灰色背景 >>> .van-tag--default { background: #f4f5f7; color: #999; } // 定义卡片的按下样式 >>> .van-card { @extend %transition; &:active { background: #e8ecf2 !important; } } // 定义swipe下面的轮播点点 >>> .van-swipe__indicators { .van-swipe__indicator { background: #b2b2b2; &--active { background: #7f7f7f; width: 12px; border-radius: 6px; } } } >>> [class*="van-hairline"]::after { border: none; } </style>
src/js/routes.js
export default [{ path: "/", redirect: "/home", }, { path: "/home", meta: { title: '空中招聘', index: 0 }, component: () => import ('../vue/page/home'), }, { path: "/xxtz", meta: { title: '消息通知' }, component: () => import ('../vue/page/home/xxtz'), }, { path: "/sp", meta: { title: '视频面试' }, component: () => import ('../vue/page/home/xxtz/sp'), }, { path: "/detail", meta: { title: '消息' }, component: () => import ('../vue/page/home/xxtz/detail'), }, { path: "/tzgg", meta: { title: '通知公告' }, component: () => import ('../vue/page/home/tzgg'), }, { path: "/xjh", meta: { title: '宣讲会' }, component: () => import ('../vue/page/home/xjh'), }, { path: "/by", meta: { title: '毕业', index: 1 }, component: () => import ('../vue/page/by'), }, { path: "/jy", meta: { title: '就业', index: 2 }, component: () => import ('../vue/page/jy'), }, { path: "/wd", meta: { title: '我的', index: 3 }, component: () => import ('../vue/page/wd'), }, { path: "/search/*", meta: { title: '搜索结果' }, component: () => import ('../vue/page/search'), }, { path: "*", meta: { title: '没有找到您想要的页面' }, component: () => import ('../vue/page/notFound') } //404页面，一定要写在最后 ];
src/vue/page/home.vue、src/vue/page/home/tzgg.vue和src/vue/page/home/xjh.vue
<template> <div :class="$route.path.replace(/\//g, '')"> <van-sticky> <van-nav-bar :title="$router.title" left-text right-text left-arrow @click-left="$router.goBack" /> </van-sticky> <br /> <br /> <br /> <br /> <h1>{{$router.title}}</h1> <van-button type="warning" to="/home">回首页</van-button> <van-button type="primary" to="/tzgg">通知公告</van-button> <van-button type="info" to="/xjh">宣讲会</van-button> </div> </template>
