171.Vue.js智能扫码点餐系统（五）【侧滑导航、定义公共的底部导航组件并实现显示隐藏】2019.03.19

0、知识点

• 设置侧滑栏导航
• 设置公共底部导航组件NavFooter
• 设置底部组件隐藏

1、侧滑导航

• 在Home.vue文件夹中
• 实现asideDomInit方法

methods:{  /*方法*/

			asideDomInit(){
					//按钮
			  		var navCate=document.getElementById('nav_cate');
			  		//分类
			  		var leftCate=document.getElementById('left_cate');
			  		
			  		//背景			  		
			  		var bg=document.getElementById('bg');
			  		var flag=true;			  		
			  		bg.onclick=navCate.onclick=function(){
			  			
			  			if(flag){			  				
			  				flag=false;
			  				leftCate.style.transform='translate(0,0)';			  				
			  				bg.style.display='block';			  				
			  			}else{	
			  				
			  				flag=true;
			  				leftCate.style.transform='translate(-100%,0)';
			  				
			  				bg.style.display='none';
			  			}
			  			
			  		}	

			}

		},
		mounted(){   /*生命周期函数*/

			this.asideDomInit();

		},

• 实现效果
  

2、公共的底部导航组件

2.1、新建public文件夹、NavFooter.vue组件

• 在component文件夹中，新建一个public文件夹，用于存放公共的组件
• 新建一个NavFooter.vue文件
  
• NavFooter.vue代码

<template>

    <div id="navfooter">
        <div id="footer_nav" class="footer_nav" @click="flag=!flag">
			<img src="../../assets/images/navigation.png"/>
			<p>导航</p>
		</div>
	
	 	<div class="footer_nav_show" v-if="flag">
            
            <ul class="list">                    
                
                <li>
                    
                        <img src="../../assets/images/menu.png"/>
                        <p>菜单</p>
                   
                  
                </li>
                
                <li>
                   
                         <img src="../../assets/images/cart.png"/>
                        <p>购物车</p>
                    
                </li>
                
                <li>	
                    
                       <img src="../../assets/images/order.png"/>
                        <p>我的订单</p>
                   	
                   
                </li>				
                
                <li>	
                  
                       <img src="../../assets/images/wallet.png"/>
                        <p>结账</p>
                   
                    
                </li>
                
                <li @click="flag=!flag">
                    <img src="../../assets/images/close.png"/>
                    <p>返回</p>
                </li>
            </ul>
            
            
        </div>

    </div>
</template>

<script>
    
    export default {


        data(){

            return {

                flag:false
            }
        }
    };
</script>

2.2 在Home.vue中，引入NavFooter

<script>

	//引入NavFooter组件
	import NavFooter from './public/NavFooter.vue';

    export default{
        data () { 
        },
</script>

2.3 定义生命周期函数、注册组件

mounted(){   /*生命周期函数*/

			this.asideDomInit();

		},components:{ // 注册组件

			'v-navfooter':NavFooter
		}

3、底部导航组件隐藏

• 默认设置flag = false，让其不显示

<script>    
    export default {
        data(){
            return {
                flag:false // 默认设置flag为false
            }
        }
    };
</script>

• 绑定flag

<div class="footer_nav_show" v-if="flag">

• 设置flag，让flag取反，当用户点击按钮后，显示“底部导航栏的所有信息”

<div id="footer_nav" class="footer_nav" @click="flag=!flag">
		<img src="../../assets/images/navigation.png"/>
		<p>导航</p>
</div>

• 效果图
  
• 设置flag，点击“返回”按钮，导航信息隐藏

 <li @click="flag=!flag">
           <img src="../../assets/images/close.png"/>
           <p>返回</p>
</li>

• 效果图
  

4、在Home.vue当中添加底部导航组件、购物车Cart

<v-navfooter></v-navfooter>
		<div id="footer_cart" class="footer_cart">
			<img src="../assets/images/cart.png"/>
			<p>购物车</p>
		</div>

5、在Cart.vue中，添加NavFooter组件

• 添加底部导航组件，此组件为公共组件

<v-navfooter></v-navfooter>			

• 引入NavFooter组件

// 引入NavFooter组件
	import NavFooter from './public/NavFooter.vue';

• 添加NavFooter组件

components:{
			'v-navfooter': NavFooter
		}