第一周、1.List组件

List是用来显示列表的容器组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。

 

创建List组件：

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.listItem{
    height: 20%;
    background-color:#d2e0e0;
    margin-top: 20px;
}

• 是的子组件，实现列表分组功能，不能再嵌套，可以嵌套。
• 是的子组件，展示列表的具体项。

添加滚动条：

设置scrollbar属性为on即可在屏幕右侧生成滚动条，实现长列表或者屏幕滚动等效果。

scrollbar="on" >

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.listItem{
    height: 20%;
    background-color:#d2e0e0;
    margin-top: 20px;
}

.listCss{
    height: 100%;
    scrollbar-color: #8e8b8b;
    scrollbar-width: 20px;
}

 

 添加侧边索引栏：

设置indexer属性为自定义索引时，索引栏会显示在列表右边界处，indexer属性设置为true,默认为字母索引表。section="#"可定义list组件的子组件为#在索引栏点击#即可显示该子组件。

 实现列表折叠和展开

为List组件添加groupcollapse和groupexpand事件实现列表的折叠和展开。

  
    
      
        

          One---{{listgroup.value}}
        
      
      
        

          Primary---{{listgroup.value}}
        
      
    
  

// xxx.js
import prompt from '@system.prompt';
export default {
    data: {
        direction: 'column',
        list: []
    },
    onInit() {
        this.list = []
        this.listAdd = []
        for (var i = 1; i <= 2; i++) {
            var dataItem = {
                value: 'GROUP' + i,
            };
            this.list.push(dataItem);
        }
    },
    collapse(e) {
        prompt.showToast({
            message: 'Close ' + e.groupid
        })
    },
    expand(e) {
        prompt.showToast({
            message: 'Open ' + e.groupid
        })
    }
}

/* index.css */
.doc-page {
    flex-direction: column;
    background-color: #F1F3F5;
}
list-item{
    margin-top:30px;
}
.top-list-item {
    width:100%;
    background-color:#D4F2E7;
}
.item-group-child {
    justify-content: center;
    align-items: center;
    width:100%;
}