微信小程序实战开发书城之分类模块

今天呢，有个小任务，就是把静态的分类小模块写出来，能够符合，也就是说一个实战的小模块，应该不是很难，下面我来上上代码。

微信小程序里的四个后缀分别表示为：
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

注意：js只需要管理状态即可，不然项目一大代码交互太多，容易混乱。
如果你想要在微信小程序里创建一个pages，只需要在app.json里写入
包名/类名/类名
“pages/classify/classify”
文件名不需要写文件后缀。框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

第一个呢，则是分类模块的wxml

主要是模板的样式：

bindtap=“switchRightTab” 在wxml文件中绑定bindtap事件 , 然后在js文件中进行响应

active 选择器用于选择活动链接。在一个链接上点击时,它就会成为活动的(激活的)。

av_left_items {{curNav == item.book_id ? ‘active’ : ”}}
实现根据是否和一级目录book_id相同，来判断是否点亮文字。
相同执行.num_left_items.active样式，不相同则执行.num_left_items样式

ishaveChild 判断是否有子集

接下来就是JS的代码了
Page({
data: {
books: [
{
book_id: 1,
book_name: “言情”,
ishaveChild: true,
children:
[
{
child_id: 1,
name: ‘三体’,
image: “http://tp.yiaedu.com/showimg.php?url=http://uploads.xuexila.com/allimg/1703/867-1F330164643.jpg”
},
{
child_id: 2,
name: ‘十二个明天’,
image: “http://img.zcool.cn/community/[email protected]”
},
{
child_id: 3,
name: ‘’,
image: “”
},
{
child_id: 4,
name: ‘’,
image: “”
}
]
},
{
book_id: 2,
book_name: “玄幻”,
ishaveChild: true,
children:
[
{
child_id: 1,
name: ‘遮天’,
image: “http://img4.imgtn.bdimg.com/it/u=2731848340,1311961800&fm=26&gp=0.jpg”
},
{
child_id: 2,
name: ‘’,
image: “”
},
{
child_id: 3,
name: ‘’,
image: “”
},
{
child_id: 4,
name: ‘’,
image: “”
},
{
child_id: 5,
name: ‘’,
image: “”
},
{
child_id: 6,
name: ‘’,
image: “”
},
{
child_id: 7,
name: ‘’,
image: “”
},
{
child_id: 8,
name: ‘’,
image: “”
}
]
},
{
book_id: 3,
book_name: “都市”,
ishaveChild: true,
children:
[
{
child_id: 1,
name: ‘’,
image: “”
},
{
child_id: 2,
name: ‘’,
image: “”
},
{
child_id: 3,
name: ‘’,
image: “”
},
{
child_id: 4,
name: ‘’,
image: “”
}
]
},
{
book_id: 4,
book_name: “科学”,
ishaveChild: true, children:
[
{
child_id: 1,
name: ‘’,
image: “”
},
{
child_id: 2,
name: ‘’,
image: “”
},
{
child_id: 3,
name: ‘’,
image: “”
},
{
child_id: 4,
name: ‘’,
image: “”
}
]
},
{
book_id: 5,
book_name: “竞技”,
ishaveChild: true,
children:
[
{
child_id: 1,
name: ‘’,
image: “”
},
{
child_id: 2,
name: ‘’,
image: “”
},
{
child_id: 3,
name: ‘’,
image: “”
},
{
child_id: 4,
name: ‘’,
image: “”
}
]
},
{
book_id: 6,
book_name: “军事”,
ishaveChild: true,
children:
[
{
child_id: 1,
name: ‘’,
image: “”
},
{
child_id: 2,
name: ‘’,
image: “”
},
{
child_id: 3,
name: ‘’,
image: “”
},
{
child_id: 4,
name: ‘’,
image: “”
}
]
},
{
book_id: 7,
book_name: “历史”,
ishaveChild: true,
children:
[
{
child_id: 1,
name: ‘’,
image: “”
},
{
child_id: 2,
name: ‘’,
image: “”
},
{
child_id: 3,
name: ‘’,
image: “”
},
{
child_id: 4,
name: ‘’,
image: “”
}
]
},
{
book_id: 8,
book_name: “游戏”,
ishaveChild: true,
children:
[
{
child_id: 1,
name: ‘’,
image: “”
},
{
child_id: 2,
name: ‘’,
image: “”
},
{
child_id: 3,
name: ‘’,
image: “”
},
{
child_id: 4,
name: ‘’,
image: “”
}
]
},
{
book_id: 9,
book_name: “武侠”,
ishaveChild: true,
children:
[
{
child_id: 1,
name: ‘’,
image: “”
},
{
child_id: 2,
name: ‘’,
image: “”
},
{
child_id: 3,
name: ‘’,
image: “”
},
{
child_id: 4,
name: ‘’,
image: “”
}
]
},
{
book_id: 10,
book_name: “奇幻”,
ishaveChild: true,
children:
[
{
child_id: 1,
name: ‘’,
image: “”
},
{
child_id: 2,
name: ‘’,
image: “”
},
{
child_id: 3,
name: ‘’,
image: “”
},
{
child_id: 4,
name: ‘’,
image: “”
}
]
},
{
book_id: 11,
book_name: “校园”,
ishaveChild: true,
children:
[
{
child_id: 1,
name: ‘’,
image: “”
},
{
child_id: 2,
name: ‘’,
image: “”
},
{
child_id: 3,
name: ‘’,
image: “”
},
{
child_id: 4,
name: ‘’,
image: “”
}
]
},{
book_id: 12,
book_name: “文化”,
ishaveChild: false,
children:[]
}
],
curNum: 1,
curIndex: 0
},

//事件处理函数
switchRightTab: function (e) {
// 获取item项的id，和数组的下标值
let id = e.target.dataset.id,
index = parseInt(e.target.dataset.index);
// 把点击到的某一项，设为当前index
this.setData({
curNum: id,
curIndex: index
})
},
// 跳转
items:function(e){
var that = this;
var id= e.currentTarget.dataset.id
console.log(‘id :’ + id);
wx.navigateTo({
url: ‘/pages/classify/detail/detail?id=’+id,
})
主要意义有：
分类页面的js代码：
books 展示的数据

curNav 控制当前那个按钮点亮

curIndex 根据此参数来拿第几个分类的数据

switchRightTab 分类tab事件的处理

books里的数据每一个对象都是一个品类的数据

book_id 识别的

book_name一级分类名称

children 二级目录的数据

最后是xwxss代码
page{
background: #e3e3e3;
}
/* 总体装订 /
.container{
/ 位置 /
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
color: #939393;
}
/ 左边侧栏盒子 /
.num_left{
/ 设置内块级元素，排满才换行 /
display: inline-block;
width: 25%;
height: 1000px;
background: #f5f5f5;
text-align: center;
position: absolute;
top: 0;
left: 0;
}
/ 左边侧栏的item /
.num_left .num_left_items{
height: 40px;
/ 垂直居中 /
line-height: 40px;
/ 填充高度 /
padding: 6px 0;
/ 设置下边框的样式 /
border-bottom: 1px solid #e3e3e3;
/ 文字大小 /
font-size: 10px;
}
/ 左边侧栏item被选中时 /
.num_left .num_left_items.active{
/ 背景变色 /
background: #f5f5f5;
color: blue;
}
/ 右边侧栏盒子 */
.num_right{
/绝对定位/
position: absolute;
top: 0;
right: 0;
/*为盒状模型提供最大的灵活性 /
flex: 1;
width: 75%;
height: 1000px;
/ 填充高度 /
padding: 10px;
/ 两个并排的带边框的框 /
box-sizing: border-box;
background: #f5f5f5;
}
/ 右边侧栏的item /
.num_right .num_right_items{
/ 向左浮动 */
float: left;
width: 50%;
height: 100px;
/*文本的水平对齐 /
text-align: center;
}
/ 设置图片 /
.num_right .num_right_items image{
width: 100px;
height: 100px;
/ 设置元素的上外边距 /
margin-top: 14px;
}
/ 设置文字 /
.num_right .num_right_items text{
/给text设成块级元素/
display: block;
margin-top:14px;
font-size: 14px;
color: black;
/设置文字溢出部分为…/
overflow: hidden;
/ 规定段落中的文本不进行换行 /
white-space: nowrap;
/ 文本溢出时不显示 */
text-overflow: ellipsis;

}
/* 暂无数据 */
.nodata_text
{
color: black;
font-size: 20px;
text-align: center;
}

inline-block:在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行，
并且可以设置width,height属性；而内联对象元素前后不会产生换行，
一系列inline元素都在一行内显示，直到该行排满，对inline元素设置width,height属性无效。

能够实现分类界面左侧和右侧栏里的数据点击有效。
感谢采纳观看！！！