共计 3118 个字符，预计需要花费 8 分钟才能阅读完成。
电商左侧商品分类菜单实现
无论是 pc 端还是手机端，都有类似左侧分类，点击后右侧切换内容的功能页面。
要想实现这个功能，首先第一步是要掌握左右布局的方法。
左右布局
推荐使用 flex 弹性布局
.parent {display: flex;}
.left {
width: 200px;
height: 100%;
background-color: red;
}
.right {
display: flex;
flex: 1;
height: 100%;
background-color: blue;
}也可以使用 absolute 定位，通过 left 调整位置。
之后渲染左侧的菜单
<ul id="J_category" class="item">
<li v-for="item in category" @click="clickme(item.id)">{{item.text}}</li>
</ul>在菜单中添加点击事件，点击事件中传入相关的参数用于获取右侧内容。
在点击事件中处理右侧的显示内容，完整代码如下：
<!DOCTYPE html>
<head>
<title> 左侧商品分类菜单 </title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<style>html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
.sub-col{position:relative;z-index:999;}
.category{width:230px;border:1px solid #8A0E00;}
.category h3 {height:30px;line-height:30px;text-indent:15px;background:#A91319;color:#fff;}
.category ul li{height:30px;line-height:30px;text-indent:35px;background:#FFF8F6 url(arrow-r.png) no-repeat 205px center;border-bottom:1px solid #ECECEC;border-top:1px solid #fff;cursor:pointer;color:#A71F37;}
.category ul li:hover{background-color:#8A0E00;color:#fff;}
.pop-category{border:2px solid #8A0E00;background:#FDF5F5;position:absolute;left:200px;top:40px;z-index:1000;}
.pop-category .sub-item{width:390px;height:350px;}
</style>
<div class="category" id="test">
<h3> 所有商品分类 </h3>
<ul id="J_category" class="item">
<li v-for="item in category" @click="clickme(item.id)">{{item.text}}</li>
</ul>
<div id="J_popCategory" class="pop-category">
<div class='sub-item' style='display:none;' id="a"> 潮流服饰 </div>
<div class='sub-item' style='display:none;' id="b"> 精品鞋包 </div>
<div class='sub-item' style='display:none;' id="c"> 美容护肤 </div>
<div class='sub-item' style='display:none;' id="d"> 珠宝饰品 </div>
<div class='sub-item' style='display:none;' id="e"> 运动户外 </div>
<div class='sub-item' style='display:none;' id="f"> 手机数码 </div>
<div class='sub-item' style='display:none;' id="g"> 居家生活 </div>
<div class='sub-item' style='display:none;' id="h"> 家电家装 </div>
<div class='sub-item' style='display:none;' id="i"> 母婴用品 </div>
<div class='sub-item' style='display:none;' id="j"> 食品保健 </div>
</div>
</div>
<script>
new Vue({
el: '#test',
data: {
category: [{
text: "潮流服饰",
id: "a"
}, {
text: "精品鞋包",
id: "b"
}, {
text: "美容护肤",
id: "c"
}, {
text: "珠宝饰品",
id: "d"
}, {
text: "运动户外",
id: "e"
}, {
text: "手机数码",
id: "f"
}, {
text: "居家生活",
id: "g"
}, {
text: "家电家装",
id: "h"
}, {
text: "母婴用品",
id: "i"
}, {
text: "食品保健",
id: "j"
}]
},
mounted: function () {this.init();
},
methods: {init() {// TODO 初始化数据},
clickme(id) {var subItems = document.getElementsByClassName('sub-item', 'div');
for (var j = 0; j < subItems.length; j++) {subItems[j].style.display = 'none';
}
const ele = document.getElementById(id)
console.log(id, ele)
ele.style.display = 'block';
}
}
})
</script>
</body>
</html>
转评赞就是最大的鼓励
正文完
发表至： java
2019-10-11
