Vant简单H5 web app【小试牛刀】

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-routerimport 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-devimport promise from 'es6-promise'; //使用axios对安卓或者ios低版本兼容性处理promise.polyfill(); //注意需要在aixo之前注册//引入jquery【安装方法】cnpm i jquery --save-devimport $ from 'jquery';Vue.prototype.$ = $;//引入Axios【安装方法】cnpm i axios -S//建议暂时不要大面积使用Axios，我严重怀疑手机端它的兼容性问题！！！/*  import axios from 'axios';Vue.prototype.$axios = axios; *///引入Vant【安装方法】cnpm i vant -Simport 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 -Simport 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-textright-textleft-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>