微信小程序实战开发书城之静态分类模块_微信小程序功能模块包图-CSDN博客

本文链接：https://blog.csdn.net/nan961136007/article/details/84615374

本文介绍了如何在微信小程序中开发一个静态的分类模块，包括WXML模板、WXSS样式和JS逻辑。讲解了文件后缀的作用，如.json、.wxml、.wxss和.js，并展示了如何通过bindtap事件和选择器实现动态样式切换。同时，解释了JS中的数据管理和状态控制，以及CSS中inline-block属性的应用，确保分类界面的交互效果。

摘要由CSDN通过智能技术生成

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

微信小程序里的四个后缀分别表示为：
.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/015da9554971170000019ae9f43459.jpg@2o.jpg"
            },
            {
              child_id: 3,
              name: '',
              image: ""
            },
            {
              child_id: 4,
              name: '&