微信小程序实战篇-分类页面制作

最新推荐文章于 2024-04-12 16:14:28 发布

第九程序

最新推荐文章于 2024-04-12 16:14:28 发布

阅读量4.1k

点赞数 2

分类专栏：微信小程序开发微信小程序文章标签：小程序开发文档微信小程序开发微信小程序开发教程

本文链接：https://blog.csdn.net/qq_38125123/article/details/73734089

版权

本文介绍如何制作微信小程序的分类页面，包括左侧的一级目录和右侧的二级目录。文章详细讲解了js、wxml和wxss文件的实现细节，并分享了字体垂直居中和单行文字省略的CSS技巧。同时，介绍了`wx:for`和`wx:if`的用法以及它们之间的区别。最后，作者总结了知识要点，方便读者回顾。

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

哈喽，大家好，今天周一了，今天第九程序要教大家微信小程序分类页面的制作，废话不多说，先上效果图。

这个界面布局难度不是很大，css基础好的，很快就实现了，分类界面，左边是一级目录，右边是一级目录对应的二级目录，根据

这个需求，我们数据设计的结构一定是数组嵌套数组，第一个数组包含一级目录数据，嵌套的数组包含的是二级目录的数据。

代码的实现

classify.js

Page({
data: {
 cateItems: [
   {
     cate_id: 1,
     cate_name: "护肤",
     ishaveChild: true,
     children:
     [
       {
         child_id: 1,
         name: '洁面皂',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"
       },
       {
         child_id: 2,
         name: '卸妆',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"
       },
       {
         child_id: 3,
         name: '洁面乳',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg"
       },
       {
         child_id: 4,
         name: '面部祛角质',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
       }
     ]
   },
   {
     cate_id: 2,
     cate_name: "彩妆",
     ishaveChild: true,
     children:
     [
       {
         child_id: 1,
         name: '气垫bb',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381301.jpg"
       },
       {
         child_id: 2,
         name: '修容/高光',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381411.jpg"
       },
       {
         child_id: 3,
         name: '遮瑕',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815181.jpg"
       },
       {
         child_id: 4,
         name: '腮红',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815759.jpg"
       },
       {
         child_id: 5,
         name: '粉饼',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153816983.jpg"
       },
       {
         child_id: 6,
         name: '粉底',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153817721.jpg"
       },
       {
         child_id: 7,
         name: '蜜粉/散粉',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153819354.jpg"
       },
       {
         child_id: 8,
         name: '隔离霜',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161215/148179053369.jpg"
       }
     ]
   },
   {
     cate_id: 3,
     cate_name: "香水/香氛",
     ishaveChild: true,
     children:
     [
       {
         child_id: 1,
         name: '淡香水EDT',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815978910.jpg"
       },
       {
         child_id: 2,
         name: '浓香水EDP',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159789883.jpg"
       },
       {
         child_id: 3,
         name: '香体走珠',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815979307.jpg"
       },
       {
         child_id: 4,
         name: '古龙香水男士的最爱',
         image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159765589.jpg"
       }
     ]
   },
   {
     cate_id: 4,
     cate_name: "个人护理",
     ishaveChild: false,
     children: []
   }
 ],
 curNav: 1,
 curIndex: 0
},

//事件处理函数  
switchRightTab: function (e) {
 // 获取item项的id，和数组的下标值  
 let id = e.target.dataset.id,
   index = parseInt(e.target.dataset.index);
 // 把点击到的某一项，设为当前index  
 this.setData({
   curNav: id,
   cur