Vant简单H5 web app【小试牛刀】-CFANZ编程社区

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>