分类界页面中,左边是一级目录,右边是一级目录对应的二级目录,根据这个需求,我们数据设计的结构是数组嵌套数组,第一个数组包含一级目录数据,嵌套的数组包含的是二级目录的数据。
<强>主要知识:
1。定义本地json文件
2.本地文件引入
3.小程序列表渲染实现
4 .解析本地json
<强>定义本地的json数据源
该文件在页面下面数据的文件下面的categroryData.js中
//模拟json数据
var categoryJson=[
{
id:“必要”,
名称:“果味”,
isChild:没错,
孩子:(
{
child_id: 1、
名称:“果味”
}
]
}，
{
id:“shucai”,
名称:“蔬菜”,
isChild:没错,
孩子:(
{
child_id: 1、
名称:“蔬菜”
}
]
}，
{
id:“chaohuo”,
名称:“炒货”,
isChild:没错,
孩子:(
{
child_id: 1、
名称:“炒货”
}
]
}，
{
id:“dianxin”,
名称:“点心”,
isChild:没错,
孩子:(
{
child_id: 1、
名称:“点”心
}
]
}，
{
id:“ganguo”,
名称:“干果”,
isChild:假的,
孩子们:[]
}，
{
id:“衣服”,
名称:“衣服”,
isChild:假的,
孩子们:[]
}，
{
id:“包”,
名称:“包包”,
isChild:假的,
孩子们:[]
}，
{
id:“女人”,
名称:“女鞋”,
isChild:假的,
孩子们:[]
}，
{
id:“mansport”,
名称:“男鞋”,
isChild:假的,
孩子们:[]
}，
{
id:“运动”,
名称:“运动鞋”,
isChild:假的,
孩子们:[]
}，
{
id:“hzp”,
名称:“化妆品”,
isChild:假的,
孩子们:[]
}，
{
id:“生活”,
名称:“日常用品”,
isChild:假的,
孩子们:[]
}，
{
id:“计算机”,
名称:“电脑”,
isChild:假的,
孩子们:[]
}，
{
id:“手机”,
名称:“手机”,
isChild:假的,
孩子们:[]
}
]//导出数据
module.exports={
dataList: categoryJson
}
显示列表的页面——categroy.wxml文件
& lt;视图类=爸饕北?
& lt;视图类=癱ategroy-left”比;
& lt; !——当前项的id等于项目项的id或者当前的下标等于项目的下标时,那个就是当前状态————比;
& lt;观点wx:="{{类别}}”天气:关键="指数"数据id="{{项目。id}}{{指数}}“材料指数=bindtap=" switchTab "
类=" cate-list {{curIndex===指数# 63;“活跃”:“}}在{{item.name}} & lt;/view>
& lt;/view>
& lt;滚动视图类=" categroy-right " scroll-y=" {{}} " scroll-into-view="{{要查看}}" scroll-with-animation=" true "比;
& lt;查看天气:如果="{{类别(curIndex) .isChild}}”在
& lt;块wx:="{{类别(curIndex)。儿童}}"天气:对于指数的天气:关键=" idx”比;
& lt;视图id="{{项目。id}}”class=" cate-box”比;
& lt;视图类=癱ate-title”比;
& lt; text> {{item.name}} & lt;/text>
& lt;/view>
& lt;/view>
& lt;/block>
& lt;/view>
& lt; !——若无数据,则显示暂无数据——比;
& lt;视图类=nodata后的天气:else>该分类暂无数据& lt;/view>
& lt;/scroll-view>
& lt;/view>
<强>说明:
,根据是否和一级目录索引相同,来判断是否选中文字。相同执行样式,不相同则执行样式。
将本地数据引入到列表中——categroy.js文件
//引入本地的json数据
var jsonData=https://www.yisu.com/zixun/require(“. ./. ./数据/categroryData.js”)
页面({
数据:{
curIndex: 0,
要查看:“必要”
}，>
.main {
宽度:100%;
高度:100%;
}
.categroy-left {
浮:左;
宽度:150 rpx;
高度:100%;
overflow-y:汽车;
边境:1 px固体# ddd;
box-sizing: border-box;
}
.categroy-left .cate-list {
身高:90 rpx;
行高:90 rpx;
text-align:中心;
border-left: 3 px固体# fff;
}
.categroy-left .cate-list.active {
颜色:# AB956D;
边框颜色:# AB956D;
}
.categroy-right {
浮:正确;
宽度:600 rpx;
高度:100%;
}
.cate-box {
高度:100%;
填充:40 rpx;
box-sizing: border-box;
}
.cate-title {
位置:相对;
高度:30 rpx;
行高:30 rpx;
填充:30 rpx 0 55 rpx;
text-align:中心;
颜色:# AB956D;
字体大小:28 rpx;
}
{前.cate-title::
位置:绝对的;
左:130 rpx;
上图:43 rpx;
内容:”;
宽度:70 rpx;
高度:4 rpx;
背景:# AB956D;
}
{后.cate-title::
位置:绝对的;
右:130 rpx;
上图:43 rpx;
内容:”;
宽度:70 rpx;
高度:4 rpx;
背景:# AB956D;
}
.nodata {
字体大小:14 px;
text-align:中心;
颜色:# AB956D;
margin-top: 100 px;
}
