微信小程序的分类页面制作

微信小程序实的分类页面制作

先上效果图。

这个界面布局难度不是很大，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,
  curIndex: index
 })
}
})

js的代码有点长，但是宏观看一下逻辑就很清晰了

1. cateItems 展示的数据
2. curNav 控制当前那个按钮点亮
3. curIndex 根据此参数来拿第几个分类的数据
4. switchRightTab 分类tab事件的处理
   

cateItems里的数据每一个对象都是一个品类的数据，拿第一个品类护肤来说，

1. cate_id 识别的id
2. cate_name 一级分类名称
3. ishaveChild 判断是否有子集
4. children 二级目录的数据
   

classify.wxml

<!--主盒子-->
<view class="container">
<!--左侧栏-->
<view class="nav_left">
 <block wx:for="{{cateItems}}">
  <!--当前项的id等于item项的id，那个就是当前状态-->
  <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->
  <view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>
 </block>
</view>
<!--右侧栏-->
<view class="nav_right">
 <!--如果有数据，才遍历项-->
 <view wx:if="{{cateItems[curIndex].ishaveChild}}">
  <block wx:for="{{cateItems[curIndex].children}}">
   <view class="nav_right_items">
   <!--界面跳转 -->
    <navigator url="../../detail/detail}}">
     <image src="{{item.image}}"></image>
     <text>{{item.name}}</text>
    </navigator>
   </view>
  </block>
 </view>
 <!--如果无数据，则显示数据-->
 <view class="nodata_text" wx:else>该分类暂无数据</view>
</view>
</view>

这里面要讲解的有

1. nav_left_items {{curNav == item.cate_id ? 'active' : ''}} 在classify.js代码中已经说了curNav的作用，就是在这里实现的
2. 根据是否和一级目录cate_id相同，来判断是否点亮文字。相同执行.nav_left_items.active样式，不相同则执行.nav_left_items样式
3. wx:for 和wx: if的知识点,这放在下面讲，请继续往下看
   

classify.wxss
page{ 
background: #f5f5f5; 
} 
/*总体主盒子*/ 
.container { 
position: relative; 
width: 100%; 
height: 100%; 
background-color: #fff; 
color: #939393; 
}
/*左侧栏主盒子*/ 
.nav_left{ 
/*设置行内块级元素（没使用定位）*/ 
display: inline-block; 
width: 25%; 
height: 100%; 
/*主盒子设置背景色为灰色*/ 
background: #f5f5f5; 
text-align: center; 
} 
/*左侧栏list的item*/ 
.nav_left .nav_left_items{ 
/*每个高30px*/ 
height: 40px; 
/*垂直居中*/ 
line-height: 40px; 
/*再设上下padding增加高度，总高42px*/ 
padding: 6px 0; 
/*只设下边线*/ 
border-bottom: 1px solid #dedede; 
/*文字14px*/ 
font-size: 14px; 
} 
/*左侧栏list的item被选中时*/ 
.nav_left .nav_left_items.active{ 
/*背景色变成白色*/ 
background: #fff; 
color: #f0145a; 
} 
/*右侧栏主盒子*/ 
.nav_right{ 
/*右侧盒子使用了绝对定位*/ 
position: absolute; 
top: 0; 
right: 0; 
flex: 1; 
/*宽度75%，高度占满，并使用百分比布局*/ 
width: 75%; 
height: 1000px; 
padding: 10px; 
box-sizing: border-box; 
background: #fff; 
} 
/*右侧栏list的item*/ 
.nav_right .nav_right_items{ 
/*浮动向左*/ 
float: left; 
/*每个item设置宽度是33.33%*/ 
width: 33.33%; 
height: 120px; 
text-align: center; 
} 
.nav_right .nav_right_items image{ 
/*被图片设置宽高*/ 
width: 60px; 
height: 60px; 
margin-top: 15px; 
} 
.nav_right .nav_right_items text{ 
/*给text设成块级元素*/ 
display: block; 
margin-top: 15px; 
font-size: 14px; 
color: black;
/*设置文字溢出部分为...*/ 
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 
} 
.nodata_text
{
color: black;
font-size: 14px; 
text-align: center; 
}

这里有个小技巧分享给大家 

要设置字体垂直居中要肿么办呐？

看我布局的样式【.nav_left .nav_left_items】把height与line-height两个属性设置成一样的就可以轻松实现字体垂直居中，但是这个有局限性，是字体要是单行的，为什么呐，因为line-height本身就是设置行高

单行文字过长部分要用省略号应该如何写样式呐？ 效果是酱紫 xxxxx...

overflow: hidden;
white-space: nowrap; //设置单行显示
text-overflow: ellipsis;

知识小课堂

1.wx:for

微信小程序列表的渲染，我们之前做首页的时候就有接触过用于循环数组，展示列表型数据

默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

<view wx:for="{{items}}">
{{index}}: {{item.message}}
</view>

也可以自定义变量表使用 wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>

2.wx:if

微信小程序条件渲染，通常是在if里面写判断语句，满足条件就执行这个view控件，通常有if对应就有else，对应的不满足if条件就

3.执行else对应的view控件。

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

我们要把 wx:if 和 hidden 做对比，他们都可以实现让控件显示与隐藏，但是他们有什么区别呐，if是当满足条件的时候才会渲染

5.view，而hidden是view一定会被渲染，只不过控制显示与隐藏罢了，那么我们要如何区分什么时机用什么方法呐？
一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，

6.如果在运行时条件不大可能改变则wx:if较好。

总结

好了，分类页面的制作完成了，

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序的分类页面制作  # 小程序  # 分页  # 微信小程序实现侧边栏分类  # 微信小程序外卖选购页实现切换分类与数量加减功能案例  # 微信小程序首页的分类功能和搜索功能的实现思路及代码详解  # 微信小程序商城项目之淘宝分类入口(2)  # 微信小程序商城项目之商品属性分类(4)  # 微信小程序商城项目之侧栏分类效果(1)  # 微信小程序 仿美团分类菜单 swiper分类菜单  # 微信小程序实现侧边分类栏  # 变量名  # 就有  # 更高  # 背景色  # 的是  # 默认为  # 都是  # 判断是否  # 表型  # 几个  # 是在  # 在这里  # 好了  # 放在  # 暂无  # 有个  # 第一个  # 说了  # 才会  # 遍历 

相关文章： 如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  如何快速搭建高效可靠的建站解决方案？  安云自助建站系统如何快速提升SEO排名？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  建站之星多图banner生成与模板自定义指南  ,在苏州找工作，上哪个网站比较好？  Avalonia如何实现跨窗口通信 Avalonia窗口间数据传递  如何在IIS中新建站点并解决端口绑定冲突？  建站之星安装后如何配置SEO及设计样式？  已有域名和空间，如何快速搭建网站？  Python文件管理规范_工程实践说明【指导】  已有域名建站全流程解析：网站搭建步骤与建站工具选择  高性能网站服务器配置指南：安全稳定与高效建站核心方案  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  SQL查询语句优化的实用方法总结  移民网站制作流程,怎么看加拿大移民官网？  陕西网站制作公司有哪些,陕西凌云电器有限公司官网？  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  如何高效搭建专业期货交易平台网站？  天河区网站制作公司,广州天河区如何办理身份证？需要什么资料有预约的网站吗？  浅析上传头像示例及其注意事项  宁波自助建站系统如何快速打造专业企业网站？  北京网页设计制作网站有哪些,继续教育自动播放怎么设置？  浙江网站制作公司有哪些,浙江栢塑信息技术有限公司定制网站做的怎么样？  如何通过西部数码建站助手快速创建专业网站？  如何快速生成可下载的建站源码工具？  开封网站制作公司,网络用语开封是什么意思？  建站之星会员如何解锁更多建站功能？  哈尔滨网站建设策划,哈尔滨电工证查询网站？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  如何快速搭建支持数据库操作的智能建站平台？  开心动漫网站制作软件下载,十分开心动画为何停播？  网站制作说明怎么写,简述网页设计的流程并说明原因？  如何基于云服务器快速搭建网站及云盘系统？  高防服务器租用如何选择配置与防御等级？  电脑免费海报制作网站推荐,招聘海报哪个网站多？  建站之星展会模板：智能建站与自助搭建高效解决方案  七夕网站制作视频,七夕大促活动怎么报名？  IOS倒计时设置UIButton标题title的抖动问题  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  如何制作一个表白网站视频,关于勇敢表白的小标题？  网站建设设计制作营销公司南阳,如何策划设计和建设网站？  简单实现Android验证码  建站之星安装提示数据库无法连接如何解决？  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  深入理解Android中的xmlns:tools属性  如何通过主机屋免费建站教程十分钟搭建网站？  c++怎么使用类型萃取type_traits_c++ 模板元编程类型判断【方法】  大连 网站制作,大连天途有线官网？  如何通过VPS搭建网站快速盈利？