13518219792
微信小程序实的分类页面制作
在东营等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站建设、成都网站制作 网站设计制作定制网站,公司网站建设,企业网站建设,品牌网站制作,成都营销网站建设,外贸营销网站建设,东营网站建设费用合理。先上效果图。
这个界面布局难度不是很大，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
})
}
})
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
