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>