HarmonyOS-JS篇：一列表展示

HarmonyOS JS 工程中展示列表信息

1. 需要在 hml 文件中 添加<list></list> 标签 如下：

 <list>
        <list-item for="{{ dataList }}" class="list">
          //添加 你的item布局样式的逻辑代码
          //从item中取值使用{{$item.id}}
        </list-item>
 </list>

2. 在js文件中添加 dataList数组

在js中的 data:{} 对象里添加 dataList:[],data对象是展示整个页面信息的

data:{
      ···,
      {
        "id":1,
        "name":"猫咪"
      },
      {
        "id":2,
        "name":"狗狗"
      }
}

3. 样式文件 css 就不写了

常用css样式

4. 点击事件等方法

hml文件中代码 onclick({{$item.id}})
js文件中

data{
    ···
},
onClick: function(e){
  //e 就是传过来的值
  //这里实现你的事件逻辑
}

5. dataList 数组 根据id 删除元素 方法

splice在函数中写 例如：

for(var i in this.dataList){
    if(this.dataList[i].id == e) {     //e是传过来的值
        this.dataList.splice(i,1)      //删除一个元素
        return;
    }
}