1# list-item-group<a name="ZH-CN_TOPIC_0000001209252161"></a> 2 3<[list](js-components-container-list.md)\>的子组件，用来展示分组，宽度默认充满list组件。 4 5> **说明：** 6>- 使用该组件时父元素list组件的样式columns必须为1，否则功能异常。 7>- 由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。 8 9## 权限列表<a name="zh-cn_topic_0000001127284878_section11257113618419"></a> 10 11无 12 13## 子组件<a name="zh-cn_topic_0000001127284878_section9288143101012"></a> 14 15仅支持<[list-item](js-components-container-list-item.md)\>。 16 17## 属性<a name="zh-cn_topic_0000001127284878_section2907183951110"></a> 18 19除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 20 21<a name="zh-cn_topic_0000001127284878_table20633101642315"></a> 22<table><thead align="left"><tr id="zh-cn_topic_0000001127284878_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127284878_aa872998ac2d84843a3c5161889afffef"><a name="zh-cn_topic_0000001127284878_aa872998ac2d84843a3c5161889afffef"></a><a name="zh-cn_topic_0000001127284878_aa872998ac2d84843a3c5161889afffef"></a>名称</p> 23</th> 24<th class="cellrowborder" valign="top" width="14.32%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127284878_ab2111648ee0e4f6d881be8954e7acaab"><a name="zh-cn_topic_0000001127284878_ab2111648ee0e4f6d881be8954e7acaab"></a><a name="zh-cn_topic_0000001127284878_ab2111648ee0e4f6d881be8954e7acaab"></a>类型</p> 25</th> 26<th class="cellrowborder" valign="top" width="10.83%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127284878_ab377d1c90900478ea4ecab51e9a058af"><a name="zh-cn_topic_0000001127284878_ab377d1c90900478ea4ecab51e9a058af"></a><a name="zh-cn_topic_0000001127284878_ab377d1c90900478ea4ecab51e9a058af"></a>默认值</p> 27</th> 28<th class="cellrowborder" valign="top" width="9.55%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127284878_p824610360217"><a name="zh-cn_topic_0000001127284878_p824610360217"></a><a name="zh-cn_topic_0000001127284878_p824610360217"></a>必填</p> 29</th> 30<th class="cellrowborder" valign="top" width="42.18%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127284878_a1d574a0044ed42ec8a2603bc82734232"><a name="zh-cn_topic_0000001127284878_a1d574a0044ed42ec8a2603bc82734232"></a><a name="zh-cn_topic_0000001127284878_a1d574a0044ed42ec8a2603bc82734232"></a>描述</p> 31</th> 32</tr> 33</thead> 34<tbody><tr id="zh-cn_topic_0000001127284878_row527211401068"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284878_p6939184510610"><a name="zh-cn_topic_0000001127284878_p6939184510610"></a><a name="zh-cn_topic_0000001127284878_p6939184510610"></a>type</p> 35</td> 36<td class="cellrowborder" valign="top" width="14.32%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284878_p69393453620"><a name="zh-cn_topic_0000001127284878_p69393453620"></a><a name="zh-cn_topic_0000001127284878_p69393453620"></a>string</p> 37</td> 38<td class="cellrowborder" valign="top" width="10.83%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284878_p193911451767"><a name="zh-cn_topic_0000001127284878_p193911451767"></a><a name="zh-cn_topic_0000001127284878_p193911451767"></a>default</p> 39</td> 40<td class="cellrowborder" valign="top" width="9.55%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284878_p119391458611"><a name="zh-cn_topic_0000001127284878_p119391458611"></a><a name="zh-cn_topic_0000001127284878_p119391458611"></a>否</p> 41</td> 42<td class="cellrowborder" valign="top" width="42.18%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284878_p139402451361"><a name="zh-cn_topic_0000001127284878_p139402451361"></a><a name="zh-cn_topic_0000001127284878_p139402451361"></a>list-item-group类型，同一list支持多种type的list-item-group，相同type的list-item-group需要确保渲染后的视图布局也完全相同，当type固定时，使用show属性代替if属性，确保视图布局不变。</p> 43</td> 44</tr> 45</tbody> 46</table> 47 48> **说明：** 49>- 通用属性中的id用来标识一个group。list中相关的函数的入参以及事件的信息皆以此标识一个唯一的group。 50 51## 样式<a name="zh-cn_topic_0000001127284878_section16337145611017"></a> 52 53除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 54 55<a name="zh-cn_topic_0000001127284878_table9906310171012"></a> 56<table><thead align="left"><tr id="zh-cn_topic_0000001127284878_row6906101041013"><th class="cellrowborder" valign="top" width="23.11768823117688%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127284878_p1890611016103"><a name="zh-cn_topic_0000001127284878_p1890611016103"></a><a name="zh-cn_topic_0000001127284878_p1890611016103"></a>名称</p> 57</th> 58<th class="cellrowborder" valign="top" width="20.477952204779523%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127284878_p1990610101108"><a name="zh-cn_topic_0000001127284878_p1990610101108"></a><a name="zh-cn_topic_0000001127284878_p1990610101108"></a>类型</p> 59</th> 60<th class="cellrowborder" valign="top" width="8.869113088691131%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127284878_p159061109106"><a name="zh-cn_topic_0000001127284878_p159061109106"></a><a name="zh-cn_topic_0000001127284878_p159061109106"></a>默认值</p> 61</th> 62<th class="cellrowborder" valign="top" width="7.519248075192481%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127284878_p7906810181014"><a name="zh-cn_topic_0000001127284878_p7906810181014"></a><a name="zh-cn_topic_0000001127284878_p7906810181014"></a>必填</p> 63</th> 64<th class="cellrowborder" valign="top" width="40.01599840015999%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127284878_p109068103102"><a name="zh-cn_topic_0000001127284878_p109068103102"></a><a name="zh-cn_topic_0000001127284878_p109068103102"></a>描述</p> 65</th> 66</tr> 67</thead> 68<tbody><tr id="zh-cn_topic_0000001127284878_row1490613102106"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284878_p7906161013101"><a name="zh-cn_topic_0000001127284878_p7906161013101"></a><a name="zh-cn_topic_0000001127284878_p7906161013101"></a>flex-direction</p> 69</td> 70<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284878_p7906161061013"><a name="zh-cn_topic_0000001127284878_p7906161061013"></a><a name="zh-cn_topic_0000001127284878_p7906161061013"></a>string</p> 71</td> 72<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284878_p16906110121010"><a name="zh-cn_topic_0000001127284878_p16906110121010"></a><a name="zh-cn_topic_0000001127284878_p16906110121010"></a>row</p> 73</td> 74<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284878_p7906181014108"><a name="zh-cn_topic_0000001127284878_p7906181014108"></a><a name="zh-cn_topic_0000001127284878_p7906181014108"></a>否</p> 75</td> 76<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284878_p17906191012103"><a name="zh-cn_topic_0000001127284878_p17906191012103"></a><a name="zh-cn_topic_0000001127284878_p17906191012103"></a>flex容器主轴方向。可选项有：</p> 77<a name="zh-cn_topic_0000001127284878_ul19906161071012"></a><a name="zh-cn_topic_0000001127284878_ul19906161071012"></a><ul id="zh-cn_topic_0000001127284878_ul19906161071012"><li>column：垂直方向从上到下</li><li>row：水平方向从左到右</li></ul> 78</td> 79</tr> 80<tr id="zh-cn_topic_0000001127284878_row17907410111012"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127284878_p20907510121020"><a name="zh-cn_topic_0000001127284878_p20907510121020"></a><a name="zh-cn_topic_0000001127284878_p20907510121020"></a>justify-content</p> 81</td> 82<td class="cellrowborder" valign="top" width="20.477952204779523%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127284878_p1907510191019"><a name="zh-cn_topic_0000001127284878_p1907510191019"></a><a name="zh-cn_topic_0000001127284878_p1907510191019"></a>string</p> 83</td> 84<td class="cellrowborder" valign="top" width="8.869113088691131%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127284878_p39071110141015"><a name="zh-cn_topic_0000001127284878_p39071110141015"></a><a name="zh-cn_topic_0000001127284878_p39071110141015"></a>flex-start</p> 85</td> 86<td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127284878_p1690711091015"><a name="zh-cn_topic_0000001127284878_p1690711091015"></a><a name="zh-cn_topic_0000001127284878_p1690711091015"></a>否</p> 87</td> 88<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127284878_p5907171091012"><a name="zh-cn_topic_0000001127284878_p5907171091012"></a><a name="zh-cn_topic_0000001127284878_p5907171091012"></a>flex容器当前行的主轴对齐格式。可选项有：</p> 89<a name="zh-cn_topic_0000001127284878_ul39078107107"></a><a name="zh-cn_topic_0000001127284878_ul39078107107"></a><ul id="zh-cn_topic_0000001127284878_ul39078107107"><li>flex-start：项目位于容器的开头。</li><li>flex-end：项目位于容器的结尾。</li><li>center：项目位于容器的中心。</li><li>space-between：项目位于各行之间留有空白的容器内。</li><li>space-around：项目位于各行之前、之间、之后都留有空白的容器内。</li><li>space-evenly<sup id="zh-cn_topic_0000001127284878_sup109071710111017"><a name="zh-cn_topic_0000001127284878_sup109071710111017"></a><a name="zh-cn_topic_0000001127284878_sup109071710111017"></a><span>5+</span></sup>: 均匀排列每个元素，每个元素之间的间隔相等。</li></ul> 90</td> 91</tr> 92</tbody> 93</table> 94 95## 事件<a name="zh-cn_topic_0000001127284878_section1052914819116"></a> 96 97除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 98 99<a name="zh-cn_topic_0000001127284878_table185296841112"></a> 100<table><thead align="left"><tr id="zh-cn_topic_0000001127284878_row0529118181119"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001127284878_p105291481111"><a name="zh-cn_topic_0000001127284878_p105291481111"></a><a name="zh-cn_topic_0000001127284878_p105291481111"></a>名称</p> 101</th> 102<th class="cellrowborder" valign="top" width="24.21242124212421%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001127284878_p75291381118"><a name="zh-cn_topic_0000001127284878_p75291381118"></a><a name="zh-cn_topic_0000001127284878_p75291381118"></a>参数</p> 103</th> 104<th class="cellrowborder" valign="top" width="50.935093509350935%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001127284878_p17529108181117"><a name="zh-cn_topic_0000001127284878_p17529108181117"></a><a name="zh-cn_topic_0000001127284878_p17529108181117"></a>描述</p> 105</th> 106</tr> 107</thead> 108<tbody><tr id="zh-cn_topic_0000001127284878_row853019819112"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127284878_p25301383111"><a name="zh-cn_topic_0000001127284878_p25301383111"></a><a name="zh-cn_topic_0000001127284878_p25301383111"></a>groupclick</p> 109</td> 110<td class="cellrowborder" valign="top" width="24.21242124212421%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127284878_p953038201119"><a name="zh-cn_topic_0000001127284878_p953038201119"></a><a name="zh-cn_topic_0000001127284878_p953038201119"></a>{ groupid: string }</p> 111</td> 112<td class="cellrowborder" valign="top" width="50.935093509350935%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127284878_p65301486113"><a name="zh-cn_topic_0000001127284878_p65301486113"></a><a name="zh-cn_topic_0000001127284878_p65301486113"></a>group点击事件。</p> 113<p id="zh-cn_topic_0000001127284878_p9530128111113"><a name="zh-cn_topic_0000001127284878_p9530128111113"></a><a name="zh-cn_topic_0000001127284878_p9530128111113"></a>groupid：被点击的group的id。</p> 114</td> 115</tr> 116<tr id="zh-cn_topic_0000001127284878_row155301861119"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127284878_p1853015818117"><a name="zh-cn_topic_0000001127284878_p1853015818117"></a><a name="zh-cn_topic_0000001127284878_p1853015818117"></a>groupcollapse</p> 117</td> 118<td class="cellrowborder" valign="top" width="24.21242124212421%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127284878_p353011810115"><a name="zh-cn_topic_0000001127284878_p353011810115"></a><a name="zh-cn_topic_0000001127284878_p353011810115"></a>{ groupid: string }</p> 119</td> 120<td class="cellrowborder" valign="top" width="50.935093509350935%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127284878_p65305861116"><a name="zh-cn_topic_0000001127284878_p65305861116"></a><a name="zh-cn_topic_0000001127284878_p65305861116"></a>group收拢事件。</p> 121<p id="zh-cn_topic_0000001127284878_p1353016817113"><a name="zh-cn_topic_0000001127284878_p1353016817113"></a><a name="zh-cn_topic_0000001127284878_p1353016817113"></a>groupid：收拢的group的id。</p> 122<p id="zh-cn_topic_0000001127284878_p11530168201111"><a name="zh-cn_topic_0000001127284878_p11530168201111"></a><a name="zh-cn_topic_0000001127284878_p11530168201111"></a>当不输入参数或者groupid为空时收拢所有分组。</p> 123</td> 124</tr> 125<tr id="zh-cn_topic_0000001127284878_row1453014801111"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127284878_p18530383117"><a name="zh-cn_topic_0000001127284878_p18530383117"></a><a name="zh-cn_topic_0000001127284878_p18530383117"></a>groupexpand</p> 126</td> 127<td class="cellrowborder" valign="top" width="24.21242124212421%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127284878_p753068161115"><a name="zh-cn_topic_0000001127284878_p753068161115"></a><a name="zh-cn_topic_0000001127284878_p753068161115"></a>{ groupid: string }</p> 128</td> 129<td class="cellrowborder" valign="top" width="50.935093509350935%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127284878_p175301087114"><a name="zh-cn_topic_0000001127284878_p175301087114"></a><a name="zh-cn_topic_0000001127284878_p175301087114"></a>group展开事件。</p> 130<p id="zh-cn_topic_0000001127284878_p1653058181112"><a name="zh-cn_topic_0000001127284878_p1653058181112"></a><a name="zh-cn_topic_0000001127284878_p1653058181112"></a>groupid：展开的group的id。</p> 131<p id="zh-cn_topic_0000001127284878_p1653078131118"><a name="zh-cn_topic_0000001127284878_p1653078131118"></a><a name="zh-cn_topic_0000001127284878_p1653078131118"></a>当不输入参数或者groupid为空时展开所有分组。</p> 132</td> 133</tr> 134</tbody> 135</table> 136 137## 方法<a name="zh-cn_topic_0000001127284878_section2279124532420"></a> 138 139支持[通用方法](js-components-common-methods.md)。 140 141## 示例<a name="zh-cn_topic_0000001127284878_section1159816598218"></a> 142 143``` 144<!-- xxx.hml --> 145<div class="doc-page"> 146 <list style="width: 100%;" id="mylist"> 147 <list-item class="top-list-item" clickeffect="false"> 148 <div class="item-div"> 149 <div class="item-child"> 150 <button type="capsule" value="Collapse first" onclick="collapseOne"></button> 151 <button type="capsule" value="Expand first" onclick="expandOne"></button> 152 </div> 153 <div class="item-child"> 154 <button type="capsule" value="Collapse all" onclick="collapseAll"></button> 155 <button type="capsule" value="Expand all" onclick="expandAll"></button> 156 </div> 157 </div> 158 </list-item> 159 160 <list-item-group for="listgroup in list" id="{{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand"> 161 <list-item type="item" style="background-color:#FFF0F5;height:95px;"> 162 <div class="item-group-child"> 163 <text>One---{{listgroup.value}}</text> 164 </div> 165 </list-item> 166 <list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true"> 167 <div class="item-group-child"> 168 <text>Primary---{{listgroup.value}}</text> 169 </div> 170 </list-item> 171 </list-item-group> 172 </list> 173</div> 174``` 175 176``` 177/* xxx.css */ 178.doc-page { 179 flex-direction: column; 180} 181 182.top-list-item { 183 width:100%; 184 background-color:#D4F2E7; 185} 186 187.item-div { 188 flex-direction:column; 189 align-items:center; 190 justify-content:space-around; 191 height:240px; 192} 193 194.item-child { 195 width:100%; 196 height:60px; 197 justify-content:space-around; 198 align-items:center; 199} 200 201.item-group-child { 202 justify-content: center; 203 align-items: center; 204 width:100%; 205} 206``` 207 208``` 209// xxx.js 210import prompt from '@system.prompt'; 211 212export default { 213 data: { 214 direction: 'column', 215 list: [] 216 }, 217 onInit() { 218 this.list = [] 219 this.listAdd = [] 220 for (var i = 1; i <= 3; i++) { 221 var dataItem = { 222 value: 'GROUP' + i, 223 }; 224 this.list.push(dataItem); 225 } 226 }, 227 collapseOne(e) { 228 this.$element('mylist').collapseGroup({ 229 groupid: 'GROUP1' 230 }) 231 }, 232 expandOne(e) { 233 this.$element('mylist').expandGroup({ 234 groupid: 'GROUP1' 235 }) 236 }, 237 collapseAll(e) { 238 this.$element('mylist').collapseGroup() 239 }, 240 expandAll(e) { 241 this.$element('mylist').expandGroup() 242 }, 243 collapse(e) { 244 prompt.showToast({ 245 message: 'Close ' + e.groupid 246 }) 247 }, 248 expand(e) { 249 prompt.showToast({ 250 message: 'Open ' + e.groupid 251 }) 252 } 253} 254``` 255 256 257 258
