小程序实现分类页

分类界页面中，左边是一级目录，右边是一级目录对应的二级目录，根据这个需求，我们数据设计的结构是数组嵌套数组，第一个数组包含一级目录数据，嵌套的数组包含的是二级目录的数据。

主要知识：

1.定义本地数据文件2.本地文件引入3.小程序列表渲染实现4.解析本地数据

定义本地的数据数据源

该文件在页下面的数据文件下面的categroryData.js中

//模拟数据数据var categoryJson=[{ id : '谷玮'，名称： '果味，isChild: true，children: [ { child_id: 1，name: '果味} ] }，{ id: ' shucai '，名称： '蔬菜，isChild: true，children: [ { child_id: 1，name: '蔬菜} ] }，{ id: '潮货，名称： '炒货，isChild: true，children: [ { child_id: 1，name: '炒货} ] }，{ id: '点新，名称： '点心，isChild: true，children: [ { child_id: 1，name: '点心} ] }，{ id: '甘果，名称： '干果，isChild: false，children: [] }， { id : }衣服，名称： '衣服，isChild: false，children: [] }，{ id: 'bag '，name: '包包，isChild: false，children: [] }，{ id: '女子，姓名： '女鞋，isChild: false，children: [] }，{ id: 'mansport '，name: '男鞋，isChild: false，children: [] }，{ id: 'sports '，name: '运动鞋，isChild: false，children: [] }，{ id: 'hzp '，name: '化妆品，isChild: false，children: [] }，{ id: 'life '，name: '日常用品，isChild: false，children: [] }，{ id: 'computer '，name: '电脑，isChild: false，children: [] }，{ id: 'phone '，name: '手机，isChild: false，children: [] } ] //导出数据模块。 导出={ datalist : categoryjson }显示列表的页面——categroy.wxml文件

view class=' main ' view class=' category-left '！-当前项的编号等于项目项的编号或者当前的下标等于项目的下标时，那个就是当前状态-查看wx :的=' { { category } } ' wx :键=' index '数据-id=' { { item。id } }“data-index=“{ { index } }”bind tap=“switch tab”class=“cate-list”{ { Curindex===index ' ' active ' : ' ' } } ' { { item。name } }/view/view scroll-view class=' category-right ' scroll-y=' { { { { } ' '在视图中滚动=' { { to view } } '带动画滚动=' true '视图wx : if=' { { category[Curindex]} .对于=' { { category[Curindex]'，isChild } } '块wx :children } } ' wx : for-index wx : key=' idx ' view id=' { { item。id } } ' class=' cate-box ' view class=' cate-title ' text { { item。name } }/text/view/view/block/view！-若无数据，则显示暂无数据- view class='nodata' wx:else该分类暂无数据/视图/滚动-视图/视图说明：

curIndex===索引？活动' : ' ',根据是否和一级目录指数相同，来判断是否选中文字。相同执行。美食列表。活动样式，不相同则执行。美食列表样式。

将本地数据引入到列表中——categroy.js文件

//引入本地的数据数据var jsonData=require('././数据/类别数据。js’)Page({ data : { curindex : 0，toView: ' guowei ' })，onLoad(){ this。setdata({//jsondata。数据列表获取数据文件中categoryData.js中定义的数据数据，并赋值给类别类别： jsonData.dataList }) }，switchTab(e){ //将获取到的项目的编号和数组的下表值设为当前的编号和下标这个。setdata({ toview : e . target。数据集。id，curindex : e .目标。数据集。索引})})列表样式——category.wxss文件。主{横向：100%;高度： 100%;} .categroy-left { float : left；宽度： 150 rpx高度： 100%;溢出-y:自动；右边框： 1px实心# ddd盒子尺寸：边框盒子；} .向左拐。美食列表{ height: 90rpx线高： 90 rpx文本对齐：中心；边框-左侧： 3px实心# fff}。向左拐美食列表。主动{ color : # AB956D边框-颜色： # AB956D} .categroy-right { float : right；宽度： 600 rpx高度： 100%;} .美食盒{身高： 100%；padding:40rpx盒子尺寸：边框盒子；} .美食-标题{位置：相对；高度： 30rpx线高： 30 rpxpadding:30rpx 0 55rpx文本对齐：中心；color : # ab 956 dfont-size : 28 rpx；} .美食-标题：在{ position : absolute eleft : 130 rpxtop : 43rp xcontent : " "；宽度： 70 rpx高度： 4rpx背景技术# AB956D}。美食-标题：在{ position : absolute right : 130 rpxtop : 43rp xcontent : " "；宽度： 70 rpx高度： 4rpx背景技术# AB956D}。无数据{ font-size : 14px文本对齐：中心；color: # AB956D边距-top : 100 px；}效果图

好啦，大功告成！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。