微信小程序 侧栏分类二：数据在js中定义

一、wxml代码

<!--主盒子--> < view class= "container"> <!-- 左侧栏开始 --> < view class= 'nav_left'> < block wx:for= "{{cateItems}}" wx:key= "id"> < view class= "nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap= "switchRightTab" data-id= "{{item.cate_id}}"> {{item.cate_name}} </ view > </ block > </ view > <!-- 左侧栏结束 --> <!-- 右侧栏开始 --> < view class= "nav_right"> < view wx:if= "{{curNav==curIndex}}"> < block wx:for= "{{cateItems[curIndex-1].children}}" wx:key= "id"> < view class= "nav_right_items"> < image src= "{{item.img}}"></ image > < text >{{item.name}} </ text > </ view > </ block > </ view > </ view > <!-- 右侧栏结束 --> </ view >

二、js代码

// pages/stock/stock_main.js // 将数据保存在js中 var types = [ { cate_id: 1, cate_name: "水果", children:[{ child_id: 1, name: "猕猴桃", img: "../images/mihoutao.png" }, { child_id: 2, name: "龙眼", img: "../images/longyan.png" }, { child_id: 3, name: "橘子", img: "../images/juzi.png" }, { child_id: 4, name: "火龙果", img: "../images/huolongguo.png" }, { child_id: 5, name: "草莓", img: "../images/caomei.png" }] }, { cate_id: 2, cate_name: "干果", children:[{ type_id: 2, child_id: 1, name: "夏威夷果", img: "../images/xiaweiyi.png" }, { type_id: 2, child_id: 2, name: "开心果", img: "../images/kaixin.png" }, { type_id: 2, child_id: 3, name: "碧根果", img: "../images/bigen.png" }, { type_id: 2, child_id: 4, name: "芒果干", img: "../images/mangguo.png" }] }, { cate_id: 3, cate_name: "蔬菜", children:[{ type_id: 3, child_id: 1, name: "花椰菜", img: "../images/huaye.png" }, { type_id: 3, child_id: 2, name: "生菜", img: "../images/shengcai.png" }, { type_id: 3, child_id: 3, name: "番茄", img: "../images/fanqie.png" }] }, { cate_id: 4, cate_name: "海鲜", children:[] }]; Page({ /* 页面的初始数据 */ data: { /* 将types数组赋值给cateItems */ cateItems: types, curNav: 1, /* 此变量用于判断该显示某个子item */ curIndex: 1 }, /* 把点击到的某一项 设为当前curNav */ switchRightTab: function (e) { let id = e.target.dataset.id; console.log(id); this.setData({ curNav: id, curIndex: id }) } })

三、wcss代码

/* 1. 设置整个页面的背景颜色 */ page{ background: #f5f5f5; /* 避免左侧Item不够时 被白色覆盖*/ } /* 2.主盒子 */ .container { width: 100%; /* 宽度占屏幕的100% */ height: 100%; /* 高度占屏幕的100% */ background-color: #fff; /* 背景颜色 */ } /* 3.左盒子*/ /* 3.1. 左侧栏主盒子总体设置 */ .nav_left{ position: absolute; /* 使用绝对定位 */ top: 0px; /* 距离上边距：0px */ left: 0px; /* 距离左边距：0px */ width: 25%; /* 每个item所占的宽度 */ background: #f5f5f5; /* 主盒子设置背景色为灰色 */ text-align: center; /* 文字居中显示 */ } /* 3.2. 左侧栏的每个item */ .nav_left .nav_left_items{ height: 40px; /* 每个item高40px*/ padding: 6px 0; /* 上内边距和下内边距是 6px[增加高度] 右内边距和左内边距是 0px*/ border-bottom: 1px solid #dedede; /* 设置下边线 */ font-size: 14px; /* 设置文字大小：14px */ } /* 3.3. 左侧栏list的item被选中时*/ .nav_left .nav_left_items.active{ background: #fff; /* 背景色变成白色 */ color: #3385ff; /* 字体编程蓝色 */ border-left: 3px solid #3385ff; /* 设置边框的宽度以及颜色 */ } /* 4.右盒子 */ /* 4.1. 右侧栏主盒子总体设置 */ .nav_right{ position: absolute; /* 使用绝对定位 */ top: 0; /* 距离上边距：0px */ left: 80px; /* 距离左边距：80px */ width: 75%; /* 右侧主盒子所占宽度 */ height: 600px; /* 右侧主盒子所占高度 */ padding: 10px; /* 所有 4 个内边距都是 10px*/ box-sizing: border-box; /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/ background: #fff; /* 右侧主盒子背景颜色 */ } /* 4.2. 右侧栏中的每个item */ .nav_right .nav_right_items{ float: left; /* 浮动向左 */ width: 33.33%; /* 每个item设置宽度是33.33% */ height: 120px; /* 每个item设置高度是120px */ text-align: center; /* 设置图片下方的提示文字居中显示 */ } /* 4.3. 右侧栏中的每个item的图样式设置 */ .nav_right .nav_right_items image{ width: 60px; /* 给图片设置宽度 */ height: 60px; /* 给图片设置高度 */ margin-top: 15px; /* 图片距离上边距15px */ border-radius: 40%; /* 给图片添加圆角边框 */ }