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

1、 模板相关内容（template）

 1 <template>
 2 <div>
 3 　　<transition :name="transitionName">
 4 　　　　<router-view class="child-view"></router-view><--组件中内容-->
 5 　　</transition>
 6 　　<!--footer-->
 7 　　<ul class="footer horizontal-list clear" v-if="footerShow"><--底部导航-->
 8 　　　　<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>
 9 　　　　<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>
10 　　　　<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>
11 　　　　<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>
12 　　</ul>
13 　　</div>
14 </template>

2 script中的数据与方法

 1 <script>
 2   export default {
 3       data () {
 4         return {
//相关数据
 5           transitionName: 'slide-left',
 6           footerShow:true,
 7           active:1,
 8           isLogin:''
 9         }
10       },
//在路由更新之前判断下一个路由跳转来展示页面的显示与隐藏
11       beforeRouteUpdate (to, from, next) {
12         let isBack = this.$router.isBack;
13         if(to.path!='/'&&to.path!='/taotejia'&&to.path!='/cart'&&to.path!='/user'){
14             this.footerShow = false   
15             this.resize(to.path)       
16         }else{
17             this.footerShow = true
18             this.resize(to.path) 
19         }
20         if(to.path == '/'){
21             this.active = 1;
22         }else if(to.path == '/taotejia'){
23             this.active = 2;
24         }else if(to.path == '/cart'){
25             this.active = 3;
26         }else if(to.path == '/user'){
27             this.active = 4;
28         }
29         if (isBack) {
30           this.transitionName = 'slide-right'
31         } else {
32           this.transitionName = 'slide-left'
33         }
34         this.$router.isBack = false
35         next();
36        
37       },
//用过mounted的钩子函数来判断active
38       mounted(){ 
39           let route = this.$route.path;
40           if(route == '/'){
41             this.active = 1;
42           }else if(route == '/taotejia'){
43             this.active = 2;
44           }else if(route == '/cart'){
45             this.active = 3;
46           }else if(route == '/user'){
47             this.active = 4;
48           }
49           if(route!='/'&&route!='/taotejia'&&route!='/cart'&&route!='/user'){
50               this.footerShow = false
51           }else{
52               this.footerShow = true
53           }
54           this.resize( route)
55       },
56       methods:{
         //当页面因为搜索框使页面窗口变小时动态的隐藏掉底部导航
57          resize(router){
58             let that=this;
59             let status=(router=='/'||router=='/taotejia'||router=='/cart'||router=='/user')
60             if(status){
61               that.footerShow=true;
62               window.addEventListener('resize',that.reverse,false)
63             }else{
64               that.footerShow=false;
65                 window.removeEventListener('resize',that.reverse,false)
66             }
67            },
68            reverse(){
69                this.footerShow=!this.footerShow
70            },
71           goCollection(){
72               this.isLogin = localStorage.getItem('token')
73             if(this.isLogin){
74               this.$router.push({name:'cart'})
75             }else{
76               this.$router.push({path:'/login',query:{'backUrl':'/user'}})
77             }
78           }
79       }
80 
81   }
82 </script>

3、style的相关内容

 1 <style >
 2   .child-view {
 3     position: absolute;
 4     width:100%;
 5     transition: all .4s cubic-bezier(.55,0,.1,1);
 6   }
 7   .slide-left-enter, .slide-right-leave-active {
 8     opacity: 0;
 9     -webkit-transform: translate(150px, 0);
10     transform: translate(150px, 0);
11   }
12   .slide-left-leave-active, .slide-right-enter {
13     opacity: 0;
14     -webkit-transform: translate(-150px, 0);
15     transform: translate(-150px, 0);
16   }
17   .header {
18     position:absolute;
19     height:44px;
20     background:#0058f1;
21     width:100%
22   }
23 </style>