當前位置：首頁 >

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

發布時間：2023/11/27 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>

總結

以上是生活随笔為你收集整理的Vant简单H5 web app【小试牛刀】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：引入Vant使用
下一篇： VSCode设置类似Webstorm那样