174.Vue.js智能扫码点餐系统（八）【点击左侧菜单栏向右滑动的原理分析、功能实现】2019.03.21

代码实现

在Home.vue文件中

<aside class="left_cate" id="left_cate">
				<ul>
					// 循环绑定索引值，点击按钮时触发changeList方法
					<li v-for="(item,key) in list" @click="changeList(key)">{{item.title}}</li>				
				</ul>				
				<div id="nav_cate" class="nav_cate">
					<img src="../assets/images/nav.png"/>
					<p>菜单</p>
				</div>
				
	
</aside>


// 获取如“城心小炒”距页面顶部的距离高度，来改变滚动条的高度
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';
			  			}
			  			
			  		}	

			},


 changeList(key){
              
                // alert(key);

                //	itemCatesDom[key].offsetTop  获取右侧分类距离顶部的高度
                
                var itemCatesDom=document.querySelectorAll('.item_cate');
                document.documentElement.scrollTop=itemCatesDom[key].offsetTop;
              
              


			    //	分类
                var leftCate=document.getElementById('left_cate');                
                //	背景			  		
                var bg=document.getElementById('bg');
                leftCate.style.transform='translate(-100%,0)';
			    bg.style.display='none';
            }

		},





.left_cate{
    
    /*css3运动  加过渡效果*/   
    transition: all .5s; // 动画效果，值越小，左侧边栏弹出的速度就越快
    
    transform: translate(-100%,0);
    
    z-index: 2;
       
    }