vue3+vant 移动端应用(2)

NavBar的妙用

区分微信公众号和手机端

判断浏览器是微信

// 判断是否是微信环境
export let isWeChat = function() {
  const ua = navigator.userAgent.toLowerCase();
  if (/MicroMessenger/i.test(ua)) return true;
  else return false;
};
复制代码
  1. 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;
}
复制代码
  1. 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;
};
复制代码
已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
<span style="color:#666666;font-size:14px;background-color:#FFFFFF;">VUE是目前最火的前框架之一,就业薪资很高,本课程教您如何快速学会VUE应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就业的你来说,那么这门课程便是你手中的葵花宝典。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">学习技巧:学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">此vue课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">代码和ppt均可下载!</span><br /> <br /> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">免费提供《企业级完整实战项目接口文档》,绝对可用。</span> </p> <p> <img src="https://img-bss.csdn.net/202001090736032736.png" alt="" /><img src="https://img-bss.csdn.net/202001090736166806.png" alt="" /><img src="https://img-bss.csdn.net/202001090736273968.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页