代码实现
在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;
}