鸿蒙项目云捐助第八讲鸿蒙App应用的分类页功能实现
·
鸿蒙项目云捐助第八讲鸿蒙App应用的分类页功能实现
在鸿蒙捐助项目中，首页实现后，接下来进行项目分类页的实现。这里可以参考美食类的app餐饮购买页来实现。模板如下图所示。
这个图片中的导航分为两部分，左侧的是分类导航，右侧的是商品中的列表导航,当点击左侧列表中的每一个子项时，就进入到了具体的详情页。在每个列表导航中显示出了商品名称及价格。这里实现的捐助页面也是左右两侧的导航，左侧显示捐助分类的列表，右侧显示捐助的具体列表内容。下面就实现云捐助的捐助页左右两侧导航的实现。
一、云捐助导航页左右侧导航的实现
如果实现云捐助左右两侧的导航，需要左侧滚动，需要右侧滚动。由于不管是左侧还是右侧，都是显示数据的相关列表，这里有左侧列表和右侧列表，鸿蒙Next提供了List列表的功能。
List列表在鸿蒙捐助页面中分为左侧列表和右侧列表。这里需要对数据进行结构上的模拟，根据之前首页的经验，数据模拟需要在mockjs的文件夹下创建模拟数据。这里在mockjs的文件夹下创建goods的数据文件如上图所示。
然后分析goods文件中的数据应该具备什么样的结构，根据这样的数据结构进行模拟数据的改造。从左右列表的数据上来看，需要捐赠的分类，在每个分类下很多具体的捐赠项，捐赠项中包括捐赠项目名称，捐赠项目捐赠的金额，由于捐赠项目相当于众筹，一定有捐赠的总金额，也有捐赠的已捐赠金额，与捐赠有关系的还有捐赠是有一定时间界限的，有捐赠的开始时间和结束时间，还有捐赠的发起方，即属于公司是属于基金会的性质，捐赠项目除了捐赠钱财外，还需要捐赠物品等。根据这样的思路，对于数据结构的模拟需要有一个分类项，这个分类项估且叫做classifyName。在classifyName的下面具有一个courseList的捐赠项目列表。捐赠项目列表中包含有name商品的名称，total_price总体的价格，used_price已用的价格，start_time捐赠开始的时间，end_time捐赠结束的时间，company的捐赠所属的公司或者组织，isObject决定此项捐赠项目是否可以捐赠物品，object_content决定捐赠的物品项,捐赠最后还要图片说明。这样，数据结构变成如下图所示的样子。
依据这种思路，我们完成8个分类的数据。如下所示。
const goods=[
{
classifyId:1,
classifyName:"慈善捐助",
courseList:[{
courseId:1,
name:"爱满彭城慈善助医",
total_price:"260万",
used_price:"130万",
start_time:"2024-07-01",
end_time:"2024-08-30",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.cisan1")
},
{
courseId:2,
name:"爱满彭城慈善助学",
total_price:"5万",
used_price:"2000",
start_time:"2024-07-30",
end_time:"2024-09-10",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.cisan2")
},
{
courseId:3,
name:"爱满彭城益起助老",
total_price:"3600万",
used_price:"720万",
start_time:"2024-07-30",
end_time:"2024-12-20",
company:"甘肃妇女儿童发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.cisan3")
},
{
courseId:4,
name:"爱满彭城助残行动",
total_price:"100万",
used_price:"2000",
start_time:"2024-07-06",
end_time:"2024-11-10",
company:"丰金县团委",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.cisan4")
},
{
courseId:5,
name:"爱心善举暖彭城",
total_price:"10万",
used_price:"2万",
start_time:"2024-07-16",
end_time:"2024-10-10",
company:"长江村委会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.cisan5")
},
{
courseId:6,
name:"爱满彭城精准帮扶",
total_price:"200万",
used_price:"1500",
start_time:"2024-08-01",
end_time:"2024-09-30",
company:"乡村发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.cisan6")
},{
courseId:7,
name:"爱满彭城慈心助学",
total_price:"20万",
used_price:"0",
start_time:"2024-08-10",
end_time:"2024-09-10",
company:"郑州社旗商会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.cisan7")
},
{
courseId:8,
name:"徐州乡村医疗互助",
total_price:"50万",
used_price:"3000",
start_time:"2024-06-30",
end_time:"2024-09-30",
company:"六安县威邦发展中心",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.cisan8")
},
{
courseId:9,
name:"情暖万家",
total_price:"12万",
used_price:"1000",
start_time:"2024-06-18",
end_time:"2024-10-09",
company:"高中生助学基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.cisan9")
},
{
courseId:10,
name:"朝阳助学",
total_price:"30万",
used_price:"3000",
start_time:"2024-08-20",
end_time:"2024-11-11",
company:"北京爱心助学委员会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.cisan10")
}
]
},
{
classifyId:2,
classifyName:"爱佑新生",
courseList:[{
courseId:1,
name:"豫爱童行学生实践项目",
total_price:"260万",
used_price:"130万",
start_time:"2024-07-01",
end_time:"2024-08-30",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aiyou1")
},
{
courseId:2,
name:"朝阳永续实习实践资助专项",
total_price:"5万",
used_price:"2000",
start_time:"2024-07-30",
end_time:"2024-09-10",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aiyou2")
},
{
courseId:3,
name:"国泰君安优秀学生奖学金",
total_price:"3600万",
used_price:"720万",
start_time:"2024-07-30",
end_time:"2024-12-20",
company:"甘肃妇女儿童发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.aiyou3")
},
{
courseId:4,
name:"国浩知识产权奖学金",
total_price:"100万",
used_price:"2000",
start_time:"2024-07-06",
end_time:"2024-11-10",
company:"丰金县团委",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aiyou4")
},
{
courseId:5,
name:"励志助学新生专项计划",
total_price:"10万",
used_price:"2万",
start_time:"2024-07-16",
end_time:"2024-10-10",
company:"长江村委会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aiyou5")
},
{
courseId:6,
name:"砺志启航资助困境大学新生",
total_price:"200万",
used_price:"1500",
start_time:"2024-08-01",
end_time:"2024-09-30",
company:"乡村发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.aiyou6")
},{
courseId:7,
name:"爱佑慈善基金会儿童福利项目",
total_price:"20万",
used_price:"0",
start_time:"2024-08-10",
end_time:"2024-09-10",
company:"郑州社旗商会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aiyou7")
},
{
courseId:8,
name:"四川\"我要上大学\"项目",
total_price:"50万",
used_price:"3000",
start_time:"2024-06-30",
end_time:"2024-09-30",
company:"六安县威邦发展中心",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aiyou8")
},
{
courseId:9,
name:"北京华育助学基金计划",
total_price:"12万",
used_price:"1000",
start_time:"2024-06-18",
end_time:"2024-10-09",
company:"高中生助学基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aiyou9")
},
{
courseId:10,
name:"\"微尘阳光少年\"助学项目",
total_price:"30万",
used_price:"3000",
start_time:"2024-08-20",
end_time:"2024-11-11",
company:"北京爱心助学委员会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aiyou10")
}
]
},
{
classifyId:3,
classifyName:"公益捐助",
courseList:[{
courseId:1,
name:"\"鲁冰花\"关爱留守儿童公益计划",
total_price:"260万",
used_price:"130万",
start_time:"2024-07-01",
end_time:"2024-08-30",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study1")
},
{
courseId:2,
name:"\"特殊困难群体帮扶救助\"基金",
total_price:"5万",
used_price:"2000",
start_time:"2024-07-30",
end_time:"2024-09-10",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study2")
},
{
courseId:3,
name:"\"梦想改造\"困境儿童帮扶",
total_price:"3600万",
used_price:"720万",
start_time:"2024-07-30",
end_time:"2024-12-20",
company:"甘肃妇女儿童发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.study3")
},
{
courseId:4,
name:"安心居·长者适老化改造",
total_price:"100万",
used_price:"2000",
start_time:"2024-07-06",
end_time:"2024-11-10",
company:"丰金县团委",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study4")
},
{
courseId:5,
name:"暖心衣橱”行动",
total_price:"10万",
used_price:"2万",
start_time:"2024-07-16",
end_time:"2024-10-10",
company:"长江村委会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study5")
},
{
courseId:6,
name:"\"爱心送暖\"助困助学",
total_price:"200万",
used_price:"1500",
start_time:"2024-08-01",
end_time:"2024-09-30",
company:"乡村发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.study6")
},{
courseId:7,
name:"家校企社·在地光芒行公益慈善项目",
total_price:"20万",
used_price:"0",
start_time:"2024-08-10",
end_time:"2024-09-10",
company:"郑州社旗商会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study7")
},
{
courseId:8,
name:"威邦助学金计划",
total_price:"50万",
used_price:"3000",
start_time:"2024-06-30",
end_time:"2024-09-30",
company:"六安县威邦发展中心",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study8")
},
{
courseId:9,
name:"贫困高中生助学金申请计划",
total_price:"12万",
used_price:"1000",
start_time:"2024-06-18",
end_time:"2024-10-09",
company:"高中生助学基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study9")
},
{
courseId:10,
name:"爱心助学义卖义演活动",
total_price:"30万",
used_price:"3000",
start_time:"2024-08-20",
end_time:"2024-11-11",
company:"北京爱心助学委员会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study10")
}
]
},
{
classifyId:4,
classifyName:"助学圆梦",
courseList:[{
courseId:1,
name:"26个高中生资助项目",
total_price:"260万",
used_price:"130万",
start_time:"2024-07-01",
end_time:"2024-08-30",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study1")
},
{
courseId:2,
name:"\"10元捐\"众筹奖学金",
total_price:"5万",
used_price:"2000",
start_time:"2024-07-30",
end_time:"2024-09-10",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study2")
},
{
courseId:3,
name:"甘肃春蕾计划",
total_price:"3600万",
used_price:"720万",
start_time:"2024-07-30",
end_time:"2024-12-20",
company:"甘肃妇女儿童发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.study3")
},
{
courseId:4,
name:"希望助学爱心圆梦助学金",
total_price:"100万",
used_price:"2000",
start_time:"2024-07-06",
end_time:"2024-11-10",
company:"丰金县团委",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study4")
},
{
courseId:5,
name:"长江理想助学金项目",
total_price:"10万",
used_price:"2万",
start_time:"2024-07-16",
end_time:"2024-10-10",
company:"长江村委会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study5")
},
{
courseId:6,
name:"\"10元捐\"众筹奖学金",
total_price:"200万",
used_price:"1500",
start_time:"2024-08-01",
end_time:"2024-09-30",
company:"乡村发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.study6")
},{
courseId:6,
name:"郑州社旗商会资助贫困计划",
total_price:"20万",
used_price:"0",
start_time:"2024-08-10",
end_time:"2024-09-10",
company:"郑州社旗商会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study7")
},
{
courseId:7,
name:"威邦助学金计划",
total_price:"50万",
used_price:"3000",
start_time:"2024-06-30",
end_time:"2024-09-30",
company:"六安县威邦发展中心",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study8")
},
{
courseId:8,
name:"贫困高中生助学金申请计划",
total_price:"12万",
used_price:"1000",
start_time:"2024-06-18",
end_time:"2024-10-09",
company:"高中生助学基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study9")
},
{
courseId:9,
name:"爱心助学义卖义演活动",
total_price:"30万",
used_price:"3000",
start_time:"2024-08-20",
end_time:"2024-11-11",
company:"北京爱心助学委员会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.study10")
}
]
}
, {
classifyId:5,
classifyName:"扶老助残",
courseList:[{
courseId:1,
name:"爱满彭城慈善助医",
total_price:"260万",
used_price:"130万",
start_time:"2024-07-01",
end_time:"2024-08-30",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.zucan1")
},
{
courseId:2,
name:"爱满彭城慈善助学",
total_price:"5万",
used_price:"2000",
start_time:"2024-07-30",
end_time:"2024-09-10",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.zucan2")
},
{
courseId:3,
name:"爱满彭城益起助老",
total_price:"3600万",
used_price:"720万",
start_time:"2024-07-30",
end_time:"2024-12-20",
company:"甘肃妇女儿童发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.zucan3")
},
{
courseId:4,
name:"爱满彭城助残行动",
total_price:"100万",
used_price:"2000",
start_time:"2024-07-06",
end_time:"2024-11-10",
company:"丰金县团委",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.zucan4")
},
{
courseId:5,
name:"爱心善举暖彭城",
total_price:"10万",
used_price:"2万",
start_time:"2024-07-16",
end_time:"2024-10-10",
company:"长江村委会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.zucan5")
},
{
courseId:6,
name:"爱满彭城精准帮扶",
total_price:"200万",
used_price:"1500",
start_time:"2024-08-01",
end_time:"2024-09-30",
company:"乡村发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.zucan6")
},{
courseId:7,
name:"爱满彭城慈心助学",
total_price:"20万",
used_price:"0",
start_time:"2024-08-10",
end_time:"2024-09-10",
company:"郑州社旗商会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.zucan7")
},
{
courseId:8,
name:"徐州乡村医疗互助",
total_price:"50万",
used_price:"3000",
start_time:"2024-06-30",
end_time:"2024-09-30",
company:"六安县威邦发展中心",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.zucan8")
},
{
courseId:9,
name:"情暖万家",
total_price:"12万",
used_price:"1000",
start_time:"2024-06-18",
end_time:"2024-10-09",
company:"高中生助学基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.zucan9")
},
{
courseId:10,
name:"朝阳助学",
total_price:"30万",
used_price:"3000",
start_time:"2024-08-20",
end_time:"2024-11-11",
company:"北京爱心助学委员会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.zucan10")
}
]
},
{
classifyId:6,
classifyName:"慈善军营",
courseList:[{
courseId:1,
name:"豫爱童行学生实践项目",
total_price:"260万",
used_price:"130万",
start_time:"2024-07-01",
end_time:"2024-08-30",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.jun1")
},
{
courseId:2,
name:"朝阳永续实习实践资助专项",
total_price:"5万",
used_price:"2000",
start_time:"2024-07-30",
end_time:"2024-09-10",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.jun2")
},
{
courseId:3,
name:"国泰君安优秀学生奖学金",
total_price:"3600万",
used_price:"720万",
start_time:"2024-07-30",
end_time:"2024-12-20",
company:"甘肃妇女儿童发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.jun3")
},
{
courseId:4,
name:"国浩知识产权奖学金",
total_price:"100万",
used_price:"2000",
start_time:"2024-07-06",
end_time:"2024-11-10",
company:"丰金县团委",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.jun4")
},
{
courseId:5,
name:"励志助学新生专项计划",
total_price:"10万",
used_price:"2万",
start_time:"2024-07-16",
end_time:"2024-10-10",
company:"长江村委会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.jun5")
},
{
courseId:6,
name:"砺志启航资助困境大学新生",
total_price:"200万",
used_price:"1500",
start_time:"2024-08-01",
end_time:"2024-09-30",
company:"乡村发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.jun6")
},{
courseId:7,
name:"爱佑慈善基金会儿童福利项目",
total_price:"20万",
used_price:"0",
start_time:"2024-08-10",
end_time:"2024-09-10",
company:"郑州社旗商会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.jun7")
},
{
courseId:7,
name:"四川\"我要上大学\"项目",
total_price:"50万",
used_price:"3000",
start_time:"2024-06-30",
end_time:"2024-09-30",
company:"六安县威邦发展中心",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.jun8")
},
{
courseId:8,
name:"北京华育助学基金计划",
total_price:"12万",
used_price:"1000",
start_time:"2024-06-18",
end_time:"2024-10-09",
company:"高中生助学基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.jun9")
},
{
courseId:9,
name:"\"微尘阳光少年\"助学项目",
total_price:"30万",
used_price:"3000",
start_time:"2024-08-20",
end_time:"2024-11-11",
company:"北京爱心助学委员会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.jun10")
}
]
},
{
classifyId:7,
classifyName:"免费捐助",
courseList:[{
courseId:1,
name:"\"鲁冰花\"关爱留守儿童公益计划",
total_price:"260万",
used_price:"130万",
start_time:"2024-07-01",
end_time:"2024-08-30",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aixin1")
},
{
courseId:2,
name:"\"特殊困难群体帮扶救助\"基金",
total_price:"5万",
used_price:"2000",
start_time:"2024-07-30",
end_time:"2024-09-10",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aixin2")
},
{
courseId:3,
name:"\"梦想改造\"困境儿童帮扶",
total_price:"3600万",
used_price:"720万",
start_time:"2024-07-30",
end_time:"2024-12-20",
company:"甘肃妇女儿童发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.aixin3")
},
{
courseId:4,
name:"安心居·长者适老化改造",
total_price:"100万",
used_price:"2000",
start_time:"2024-07-06",
end_time:"2024-11-10",
company:"丰金县团委",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aixin4")
},
{
courseId:5,
name:"暖心衣橱”行动",
total_price:"10万",
used_price:"2万",
start_time:"2024-07-16",
end_time:"2024-10-10",
company:"长江村委会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aixin5")
},
{
courseId:6,
name:"\"爱心送暖\"助困助学",
total_price:"200万",
used_price:"1500",
start_time:"2024-08-01",
end_time:"2024-09-30",
company:"乡村发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.aixin6")
},{
courseId:7,
name:"家校企社·在地光芒行公益慈善项目",
total_price:"20万",
used_price:"0",
start_time:"2024-08-10",
end_time:"2024-09-10",
company:"郑州社旗商会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aixin7")
},
{
courseId:8,
name:"威邦助学金计划",
total_price:"50万",
used_price:"3000",
start_time:"2024-06-30",
end_time:"2024-09-30",
company:"六安县威邦发展中心",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aixin8")
},
{
courseId:9,
name:"贫困高中生助学金申请计划",
total_price:"12万",
used_price:"1000",
start_time:"2024-06-18",
end_time:"2024-10-09",
company:"高中生助学基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aixin9")
},
{
courseId:10,
name:"爱心助学义卖义演活动",
total_price:"30万",
used_price:"3000",
start_time:"2024-08-20",
end_time:"2024-11-11",
company:"北京爱心助学委员会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.aixin10")
}
]
}
,{
classifyId:8,
classifyName:"突发事件",
courseList:[{
courseId:1,
name:"26个高中生资助项目",
total_price:"260万",
used_price:"130万",
start_time:"2024-07-01",
end_time:"2024-08-30",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.tufa1")
},
{ courseId:2,
name:"\"10元捐\"众筹奖学金",
total_price:"5万",
used_price:"2000",
start_time:"2024-07-30",
end_time:"2024-09-10",
company:"乡村发展基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.tufa2")
},
{
courseId:3,
name:"甘肃春蕾计划",
total_price:"3600万",
used_price:"720万",
start_time:"2024-07-30",
end_time:"2024-12-20",
company:"甘肃妇女儿童发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.tufa3")
},
{
courseId:4,
name:"希望助学爱心圆梦助学金",
total_price:"100万",
used_price:"2000",
start_time:"2024-07-06",
end_time:"2024-11-10",
company:"丰金县团委",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.tufa4")
},
{
courseId:5,
name:"长江理想助学金项目",
total_price:"10万",
used_price:"2万",
start_time:"2024-07-16",
end_time:"2024-10-10",
company:"长江村委会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.tufa5")
},
{
courseId:6,
name:"\"10元捐\"众筹奖学金",
total_price:"200万",
used_price:"1500",
start_time:"2024-08-01",
end_time:"2024-09-30",
company:"乡村发展基金会",
isObject:false,
object_content:"无",
pic:$r("app.media.tufa6")
},{
courseId:7,
name:"郑州社旗商会资助贫困计划",
total_price:"20万",
used_price:"0",
start_time:"2024-08-10",
end_time:"2024-09-10",
company:"郑州社旗商会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.tufa7")
},
{
courseId:8,
name:"威邦助学金计划",
total_price:"50万",
used_price:"3000",
start_time:"2024-06-30",
end_time:"2024-09-30",
company:"六安县威邦发展中心",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.tufa8")
},
{
courseId:9,
name:"贫困高中生助学金申请计划",
total_price:"12万",
used_price:"1000",
start_time:"2024-06-18",
company:"高中生助学基金会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.tufa9")
},
{
courseId:10,
name:"爱心助学义卖义演活动",
total_price:"30万",
used_price:"3000",
start_time:"2024-08-20",
end_time:"2024-11-11",
company:"北京爱心助学委员会",
isObject:true,
object_content:"书本，笔，手机,电脑等学习用品",
pic:$r("app.media.tufa10")
}
]
}
]
export default goods;
这些数据的最后都需要export default 导出，这样就可以在捐赠页面的列表中进行显示。
为了使代码具有可读性，在点击index.ets中的“分类”导航页面时，显示的也是一个组件，这里在component文件夹中建立MyNewSideBar组件，如下图所示。
接下来，需要根据这样的数据进行布局，左边显示的是分类数据，也就是显示导出goods商品表的分类条目，在代码处理上也需要导入goods的数据，代码如下图所示。
按照之前首页进行组件设计的原理，有了数据后，还需要建立鸿蒙类，这里需要建立与捐赠商品结构相对应的鸿蒙类。由于捐赠商品分类中的courseList是一个数组，数组中由每一个捐赠商品构成的。这里需要定义一个商品分类的鸿蒙类，这个分类中包含有courseList的数组，然后在数据中包含有捐赠商品。这样在data的目录下需要创建两个文件，一个是捐赠商品分类的鸿蒙类，一个是捐赠商品的鸿蒙类。如下图所示。
其中捐赠商品分类的鸿蒙类代码如下图所示。
类代码中有courseList，其中courseList是一个数组，这个数组中是Goods捐赠商品类,其它属性还有两个，一个是classifyId表示分类id，一个是classifyName分类条目名称。
再看捐赠商品的鸿蒙类代码如下图所示。
从图中得知，商品捐赠鸿蒙类的属性全部来自于模拟数据的捐赠商品类。
接下来在捐赠商品分类页分为左侧项目分类和右侧分类捐赠商品，左侧可以使用List组件，把ForEach的商品分类数据条目显示在ListItem中，并定义ListItem商品相关文字属性。在调试商品表的左右列表时可以加入@Entry的入口注解，使其可以在预览中显示，这样方便调试。左侧List加入goods数据后的代码如下图所示。
这里build()方法中最外层元素Flex弹性盒子的布局是横向布局，设置了属性{direction:FlexDirection.Row}，在其中包括子元素List()列表，在List()列表中嵌套了ForEach的循环体，循环模拟的商品数据goods，对于每一个条目来说，这里左侧的列表只显示分类，鸿蒙Next又是一个语法严格的语言，这里需要把遍历的每一个条目设定为GoodsCategory的鸿蒙类说明，然后在ForEach的循环体中显示ListItem()的列表项目，在列表项目中只显示Text文本，Text文本组件定义其高度height，背景颜色backgroundColor，内边距padding值为20。对于整体的List（）居于左侧，这里占宽比为30%。
接下来，右边的显示捐助产品的展示，也需要一个右侧的List（）组件，在List()组件中也需要ForEach遍历每一个捐助商品的列表项，捐赠的第一个商品与鸿蒙类Goods类型一致，只不过在ForEach循环体的结果中需要显示更多的捐赠商品Goods的信息。代码如下图所示。
这里对goods的循环需要双重循环，第一重循环每一个分类，第二重循环每个分类下的商品，每个商品的布局整体成行式，图片在左边占领整个条目的高度，右侧的文字显示出捐赠商品名称，捐赠商品名总价，捐赠商品已经众筹的价格，捐赠商品的公司，以及是否可以捐赠物品等信息显示。
由于MyNewSideBar组件本身具有@Entry的注解，因此可以通过预览查看效果,效果图如下图所示。
### 但是，目前的问题是右侧的捐赠商品列表不能进行上下拖动，原因没有在List中添加scroller滚动控制器，这里为右侧的List组件添加上scroller滚动控制器后就可以进行上下拖动的效果，首先在全局定义一个右侧List的scroller滚动控制器。代码如下图所示。
然后在右侧的List中添加scroller滚动控制器。代码如下图所示。
### 这时右侧的详情列表就可以滚动自如了。后面持续完成捐助页及捐助岛等相关的功能页面，请持续关注。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
34
0- 0
已为社区贡献20条内容
所有评论(0)