鸿蒙4.0 list 侧滑删除

上源码
接口为公共接口,图片随意找的 别介意

@Component
export struct FocusPage {
  @State focusList: Array<FocusData> = []

  aboutToAppear() {
    let mpSet = new Map<string, Object>()
    mpSet['key'] = 'r8Wr51n8RpNtdi77yYAgc2uWoB'
    findModel.getFocusList(mpSet, (data) => {
      console.log(data)
      this.focusList = data.data
    })
  }

  @Builder itemEnd(index: number) {
    // 侧滑后尾端出现的组件
    Button({ type: ButtonType.Circle }) {
      Image($r('app.media.icon_about'))
        .width(80)
        .height(80)
    }
    .onClick(() => {
      this.focusList.splice(index, 1);
    })
  }

  build() {
    Column() {
      List() {
        ForEach(this.focusList, (item,index) => {
          ListItem() {
            Column() {
              Stack({ alignContent: Alignment.TopStart }) {
                Image(item.picUrl).width('100%').height('180vp').border({ radius: '10vp' })
                Text(item.type).height('20vp')
                  .backgroundColor('red')
                  .border({ radius: { topLeft: '10vp', bottomRight: '10vp' } })
                .padding('5vp')
                Column(){
                  Text(item.title)
                  Row(){
                    Text(item.actors).fontWeight(FontWeight.Bold).textCase(TextCase.UpperCase)
                    Text(item.releaseDateStr)
                  }
                  .justifyContent(FlexAlign.SpaceBetween)
                }
                .height('180vp')
                .justifyContent(FlexAlign.End)
              }

            }
            .margin({top:'10vp'})
          }.swipeAction({ end: this.itemEnd.bind(this, index) })
        })


      }
    }
    .width('100%')
  }
}