vue3+vant 移動端應用（2）

NavBar的妙用

區分微信公衆號和手機端

判斷瀏覽器是微信

// 判斷是不是微信環境
export let isWeChat = function() {
  const ua = navigator.userAgent.toLowerCase();
  if (/MicroMessenger/i.test(ua)) return true;
  else return false;
};
複製代碼

2. NavBar組件封裝,components文件下新建NavBar.vue文件

<template>
  <div id="NavBar">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
  </div>
</template>
export default {
  // title：用來顯示當前網頁的title
  props: ["title"],
  methods: {
    onClickLeft() {
      // 點擊回退的時候當作地址回退
      this.$router.go(-1);
    }
  }
};

#NavBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
複製代碼

3. App.vue頁面引入組件

<template>
  <div id="app">
    <NavBar v-show="navShow" :title="title"></NavBar>
    <!-- 若是顯示NavBar的時候給路由添加一個類讓其將NavBar的高度空出來 -->
    <div style="height:100%" :class="{child: navShow}">
      <transition :name="transitionName">
        <router-view class="router"></router-view>
      </transition>
    </div>
  </div>
</template>
<script>
import NavBar from "./components/NavBar.vue";
// 引入判斷微信的方法
import { isWeChat } from "lputils";
export default {
  components: {
    NavBar
  },
  data() {
    return {
      transitionName: "fade",
      navShow: false
    };
  },
  mounted() {
    //檢測瀏覽器類型決定是否展現欄
    let isWe = isWeChat();
    this.navShow = !isWe;
    this.title = this.$route.meta.title;
  },
  // 基於路線變化的動態設置路由切換動畫
  watch: {
    $route(to, from) {
      this.title = to.meta.title;
      const toDepth = to.path.split("/").length;
      const fromDepth = from.path.split("/").length;
      if (toDepth != fromDepth) {
        this.transitionName =
          toDepth < fromDepth ? "slide-right" : "slide-left";
      } else {
        this.transitionName = "fade";
      }
    }
  }
};
</script>
<style scoped>
#router_box {
  position: relative;
  height: 100%;
}
.router {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  transition: all 500ms ease;
  box-shadow: -2px 0 30px rgba(0, 0, 0, 0.1);
}
.child {
  height: 100%;
  padding-top: 46px;
}
.child > div {
  height: 93%;
  height: calc(100% - 46px);
}

.slide-left-enter,
.slide-right-leave-active {
  transform: translate(100%, 0);
  z-index: 1000;
}
/*解決頁面層級顯示在滑動上層問題*/
.slide-left-leave-active,
.slide-left-leave-to {
  z-index: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
複製代碼

更多判斷函數

//判斷是不是iOS設備
export let isIos = () => {
  const ua = navigator.userAgent.toLowerCase();
  if (/(iPhone|iPad|iPod|iOS)/i.test(ua)) return true;
  else return false;
};

//判斷是不是QQ環境
export let isQQ = function() {
  const ua = navigator.userAgent.toLowerCase();
  if (ua.match(/\sQQ/i) !== null) return true;
  else return false;
  
};

//判斷是不是Android環境
export let isAndroid = function() {
  var ua = navigator.userAgent.toLowerCase();
  if (/Android/i.test(ua)) return true;
  else return false;
};
複製代碼