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;
};
复制代码