话不多说，先上代码

页面代码

import FindItemViewModel from './model/weChatFindModel'
@Entry
@Component
export struct FindPage {

  build() {
    Column() {
          Text("发现")
            .height('6%')
            .fontSize(18)
            .margin({top:10})
            .fontWeight(FontWeight.Bold)

      List({initialIndex:0}){
        ForEach(FindItemViewModel.getFirstGridData(),(item)=>{
          ListItem(){
            Row(){
              Row(){
                Image(item.img)
                  .width(25)
                  .margin({left:15})
                Text(''+item.title)
                  .margin({left:15})
              }
              Image($r('app.media.ic_public_arrow_right_filled'))
                .width(20)
                .height(20)
                .margin({right:15})
            }
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)

          }.margin({top:item.upperGap?10:0})
          .height(50)
          .width('100%')
          .borderRadius(10)
          .backgroundColor('#ffffff')
        })
      }
      .margin({top:10})
      .height('82%')
      .listDirection(Axis.Vertical)
      // .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%')

  }
}

数据类代码

class MineItemResource{
  title:string;
  img:Resource;
  upperGap:boolean;
  routerGo?:string;
  constructor(title: string, img: Resource,upperGap:boolean,routerGo?:string) {
    this.title = title;
    this.img = img;
    this.upperGap = upperGap;
    this.routerGo =routerGo

  }
}

export class MineItemViewModel{
  getFirstGridData():Array<MineItemResource>{
    let firstGridData:MineItemResource[]=[
      new MineItemResource('朋友圈',$r('app.media.ic_public_circle_of_friends'),false),
      new MineItemResource('视频号',$r('app.media.ic_public_coolect'),true),
      new MineItemResource('直播',$r('app.media.ic_public_picture'),false),
      new MineItemResource('扫一扫',$r('app.media.ic_public_play_normal'),true),
      new MineItemResource('看一看',$r('app.media.ic_desktop_servicewidgets'),true),
      new MineItemResource('搜一搜',$r('app.media.ic_public_emoji'),false),
      new MineItemResource('附近',$r('app.media.ic_public_settings'),true),
      new MineItemResource('购物',$r('app.media.ic_public_shopping'),true),
      new MineItemResource('游戏',$r('app.media.ic_public_emoji'),false),
      new MineItemResource('小程序',$r('app.media.ic_public_applet'),true)

    ]
    return firstGridData
  }
}
export default new MineItemViewModel()

最终实现效果

还有很多不完善的地方，下一步继续完善