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

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

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

2.js业务逻辑部分

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

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

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

               ]}
              ]

    }
}

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>

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;
}

5.最终效果