HarmonyOS 应用开发-鸿蒙微信（三）：通讯录

HarmonyOS 微信 通讯录页面

还是容器组件搭配基本组件

数据代码：

为了方便下一步的开发，在定义数据类的时候添加了一些可选数据。

class FriendsResource{
  title:string;
  img:Resource |string;
  cs:string
  routerGo?:string;
  constructor(title: string, img: Resource |string,cs:string,routerGo?:string) {
    this.title = title;
    this.img = img;
    this.cs = cs;
    this.routerGo =routerGo

  }
}

export class FriendsItemViewModel{
  getFirstGridData():Array<FriendsResource>{
    let getFriendsData:FriendsResource[]=[
      new FriendsResource('新的朋友',$r('app.media.addFrineds1'),''),
      new FriendsResource('仅聊天朋友',$r('app.media.ic_public_coolect'),''),
      new FriendsResource('群聊',$r('app.media.ic_public_picture'),''),
      new FriendsResource('标签',$r('app.media.ic_public_play_normal'),''),
      new FriendsResource('公众号',$r('app.media.ic_desktop_servicewidgets'),''),
      new FriendsResource('企业微信联系人',$r('app.media.companyWechat'),''),
      new FriendsResource('员工之家',$r('app.media.ic_public_emoji'),'我的企业'),
      new FriendsResource('A朋友1','https://img-blog.csdnimg.cn/6d15082ac7234ec7a16065e74f689590.jpeg','A'),
      new FriendsResource('A朋友2','https://img-blog.csdnimg.cn/fcc22710385e4edabccf2451d5f64a99.jpeg',''),
      new FriendsResource('A朋友3',$r('app.media.ic_public_emoji'),''),
      new FriendsResource('B朋友1','https://img-blog.csdnimg.cn/3d809148c83f4720b5e2a6567f816d89.jpeg','B'),
      new FriendsResource('B朋友2','https://img-blog.csdnimg.cn/5eb39ba135e644c6830e56a47ece3daf.png',''),
      new FriendsResource('C朋友3',$r('app.media.ic_public_emoji'),''),

    ]
    return getFriendsData
  }
}
export default new FriendsItemViewModel()

页面逻辑代码

import FriendsItemViewModel from './model/weChatAddressModel'

@Entry
@Component
export struct AddressPage {
  build() {
    Column() {
      Text("通讯录")
        .height('6%')
        .fontSize(18)
        .margin({top:10})
        .fontWeight(FontWeight.Bold)
      Image($r("app.media.addfrineds"))
        .width(25)
        .height(25)
        .margin({left:260,top:-32})
      Row(){
        TextInput({ placeholder: '搜索' })
          .width(400)
          .height(35)
          .margin({top:20})
          .type(InputType.Normal)
      }

      List({initialIndex:0}){
        ForEach(FriendsItemViewModel.getFirstGridData(),(item)=>{
          ListItem(){
            Column(){

            if(item.cs!==''){
              Row(){
                Text(''+item.cs)
                  .margin({left:15})
                  .fontSize(15)
              }.justifyContent(FlexAlign.Start)
              .height(30)
              .width('100%')
            }
            Row(){
              Row(){
                Image(item.img)
                  .width(35)
                  .height(35)
                  .margin({left:15})
                Text(''+item.title)
                  .margin({left:15})
                  // .fontSize(2)
              }
            }
            .height(50)
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)
            }
          }
          // .height(50)
          .width('100%')
          .backgroundColor('#ffffff')
        })
      }
      .margin({top:10})
      .height('92%')
      .listDirection(Axis.Vertical)
      .divider({ strokeWidth: 1, color: 0xF0F0Ff, startMargin: 60, endMargin: 100 }) // 每行之间的分界线

      // .divider({strokeWidth:1,color:'#fffffa',startMargin:20,endMargin:0})
      .edgeEffect(EdgeEffect.Spring)
      .onScrollIndex((firstIndex:number,lastIndex:number)=>{
        console.log('first'+firstIndex,'last'+lastIndex)
      })
    }
    .height('100%')

  }
}