微信小程序实现侧边分类栏

本文实例为大家分享了微信小程序实现侧边分类栏的具体代码，供大家参考，具体内容如下

效果图

布局分析

分成三个盒子：
主盒子，左盒子，右盒子

–wxml–

 
 
 
 水果
 
 
 干果
 
 
 蔬菜
 
 
 海鲜
 
 
 
 
 
 
 
 猕猴桃
 
 
 
 龙眼
 
 
 
 橘子
 
 
 
 火龙果
 
 
 
 草莓
 
 
 
 
 
 夏威夷果
 
 
 
 开心果
 
 
 
 碧根果
 
 
 
 芒果
 
 
 
 
 
 花椰菜
 
 
 
 生菜
 
 
 
 番茄
 
 
 

–js–

// pages/stock/stock_main.js
Page({

 
 data: {
 curNav:1
 },
 
 switchRightTab:function(e){
 let id = e.target.dataset.id;
 console.log(id);
 this.setData({
 curNav: id
 })
 }
})

–wxss–

page{ 
 background: #f5f5f5; 
 
} 
 
.container { 
 width: 100%; 
 height: 100%; 
 background-color: #fff; 
}
 
  
.nav_left{ 
 position:absolute; 
 top:0px; 
 left:0px; 
 width: 25%; 
 background: #f5f5f5;  
 text-align: center; 
}
 
.nav_left .nav_left_items{ 
 height: 40px;  
 padding: 6px 0; 
 border-bottom: 1px solid #dedede;  
 font-size: 14px;  
} 
 
.nav_left .nav_left_items.active{ 
 background: #fff;  
 color: #3385ff; 
 border-left: 3px solid #3385ff; 
}
 
 
.nav_right{ 
 position: absolute;  
 top: 0; 
 left: 80px; 
 width: 75%; 
 height: 600px; 
 padding: 10px; 
 box-sizing: border-box; 
 background: #fff; 
}
 
.nav_right .nav_right_items{ 
 float: left;  
 width: 33.33%;  
 height: 120px;  
 text-align: center; 
} 
 
.nav_right .nav_right_items image{ 
 width: 60px;  
 height: 60px;  
 margin-top: 15px;  
 border-radius: 40%; 
} 

更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。