鸿蒙的js开发部模式13：鸿蒙的列表分组的多栏目构建与实践原创

六合李欣

发布于 2021-2-3 16:04

浏览

0收藏

1.鸿蒙的列表分组的多栏目构建与实践效果

使用分组构建，弹出多栏目

鸿蒙的js开发部模式13：鸿蒙的列表分组的多栏目构建与实践-鸿蒙开发者社区

2.js业务逻辑部分

export default {
    data: {
        title: 'World',
        //构建数据
        lists:[

               {"ftext":"美味学院","child":[[{"ctext":"铁板烧"},{"ctext":"火锅"}],
                                        [{"ctext":"海鲜"},{"ctext":"乱炖"}]]},
               {"ftext":"地方特色","child":[

                   [{"ctext":"活珠子"},{"ctext":"猪头肉"},{"ctext":"三鲜面"}],
                   [{"ctext":"蟹黄汤包"},{"ctext":"豆腐圆"}]

               ]}
              ]

    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

3.页面视图

<div class="container">
   <list  class="list">
      <block  for="{{lists}}">
        <list-item-group  class="groups">
           <list-item  class="listitem">
                <text>{{$item.ftext}}</text>
           </list-item>
           <block  for="{{ (k,v)  in $item.child}}">
              <list-item class="clistitem">
                 <div  class="box">
                    <block for="{{(ck,cv) in v}}">
                       <div  class="cbox">
                         <text>{{cv.ctext}}</text>
                       </div>
                    </block>

                 </div>
              </list-item>
           </block>
        </list-item-group>
      
      </block>
   </list>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

4.样式逻辑

.container {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: 1500px;
}
.list{
    width: 100%;
    height: 100%;
}
.groups{
    width: 100%;
}
.listitem{
    width: 100%;
    height: 15%;
    border-bottom: 5px solid powderblue;
    display: flex;
    justify-content: center;
}
.clistitem{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
}
.box{
    width: 90%;
    height: 80%;
    border: 5px  solid green;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

}
.cbox{
    width: 35%;
    height: 80%;
    border:5px  solid  black;
    margin: 10px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.