vue+mui+html5+ plus开发的混合应用底部导航的显示与隐藏

1、 模板相关内容（template）

<template>
<div>
　　<transition :name="transitionName">
　　　　<router-view class="child-view"></router-view><--组件中内容-->
　　</transition>
　　<!--footer-->
　　<ul class="footer horizontal-list clear" v-if="footerShow"><--底部导航-->
　　　　<li><router-link :to="{name:'index'}"><img src="../assets/img/footer1.png" alt="" v-if="active!=1"><img src="../assets/img/footer1_active.png" alt="" v-else>首页</router-link></li>
　　　　<li><router-link :to="{name:'taotejia'}"><img class="img" src="../assets/img/footer2.png" alt="" v-if="active!=2"><img class="img" src="../assets/img/footer2_active.png" alt="" v-else>淘特价</router-link></li>
　　　　<li @click="goCollection()"><img class="img" src="../assets/img/footer3.png" alt="" v-if="active!=3"><img class="img" src="../assets/img/footer3_active.png" alt="" v-else>收藏夹</li>
　　　　<li><router-link :to="{name:'user'}"><img src="../assets/img/footer4.png" alt="" v-if="active!=4"><img src="../assets/img/footer4_active.png" alt="" v-else>我的</router-link></li>
　　</ul>
　　</div>
</template>

 

2 script中的数据与方法

<script>
  export default {
      data () {
        return {
　　　　　　　　//相关数据
          transitionName: 'slide-left',
          footerShow:true,
          active:1,
          isLogin:''
        }
      },
　　　　//在路由更新之前判断下一个路由跳转来展示页面的显示与隐藏
      beforeRouteUpdate (to, from, next) {
        let isBack = this.$router.isBack;
        if(to.path!='/'&&to.path!='/taotejia'&&to.path!='/cart'&&to.path!='/user'){
            this.footerShow = false   
            this.resize(to.path)       
        }else{
            this.footerShow = true
            this.resize(to.path) 
        }
        if(to.path == '/'){
            this.active = 1;
        }else if(to.path == '/taotejia'){
            this.active = 2;
        }else if(to.path == '/cart'){
            this.active = 3;
        }else if(to.path == '/user'){
            this.active = 4;
        }
        if (isBack) {
          this.transitionName = 'slide-right'
        } else {
          this.transitionName = 'slide-left'
        }
        this.$router.isBack = false
        next();
       
      },
　　　　//用过mounted的钩子函数来判断active
      mounted(){ 
          let route = this.$route.path;
          if(route == '/'){
            this.active = 1;
          }else if(route == '/taotejia'){
            this.active = 2;
          }else if(route == '/cart'){
            this.active = 3;
          }else if(route == '/user'){
            this.active = 4;
          }
          if(route!='/'&&route!='/taotejia'&&route!='/cart'&&route!='/user'){
              this.footerShow = false
          }else{
              this.footerShow = true
          }
          this.resize( route)
      },
      methods:{
         //当页面因为搜索框使页面窗口变小时动态的隐藏掉底部导航
         resize(router){
            let that=this;
            let status=(router=='/'||router=='/taotejia'||router=='/cart'||router=='/user')
            if(status){
              that.footerShow=true;
              window.addEventListener('resize',that.reverse,false)
            }else{
              that.footerShow=false;
                window.removeEventListener('resize',that.reverse,false)
            }
           },
           reverse(){
               this.footerShow=!this.footerShow
           },
          goCollection(){
              this.isLogin = localStorage.getItem('token')
            if(this.isLogin){
              this.$router.push({name:'cart'})
            }else{
              this.$router.push({path:'/login',query:{'backUrl':'/user'}})
            }
          }
      }

  }
</script>

 3、style的相关内容

<style >
  .child-view {
    position: absolute;
    width:100%;
    transition: all .4s cubic-bezier(.55,0,.1,1);
  }
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(150px, 0);
    transform: translate(150px, 0);
  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-150px, 0);
    transform: translate(-150px, 0);
  }
  .header {
    position:absolute;
    height:44px;
    background:#0058f1;
    width:100%
  }
</style>