鸿蒙移动端常用UI——refresh上下拉刷新和左滑删除

效果图

image.png image.png

refresh上下拉刷新和左滑删除功能全部代码，上拉刷新功能待优化

import { BSText } from '../../../components/BSUI'
import { AppBarWidget } from './AppBarWidget'
@Entry
@Component
struct RefreshPage {
  @State isRefreshing: boolean = false
  @State counter: number = 0
  private items:Array<string> = ['1','2','3','1','2','3','1','2','3','1','2','3','1','2','3','1','2','3']
  @State isLoading: boolean = false
  @State isOnReachEnd: boolean = false

  @Builder deleteItem(){
    Row(){
      BSText({title:'删除',fontColor:'#F33F3F',fontSize:15})
    }.height('100%')
    .padding(8)
    .backgroundColor(Color.Orange)
  }
  @Builder item(title:string){
    Row(){
      BSText({title:title+ '+' + this.counter.toString(),fontColor:'#333333',fontSize:15}).margin(20)
    }.backgroundColor(Color.Blue).width('100%')
  }

  build() {
    Column() {
      AppBarWidget({title:'RefreshPage'})
      Stack(){
        Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
          List(){
            ForEach(this.items,(item:string)=>{
              ListItem(){
                this.item(item.toString())
              }.swipeAction({end:this.deleteItem()}).width('100%').margin({bottom:10})
            })
          }
          .backgroundColor(Color.Pink)
          .onReachEnd(() => {
            this.isLoading = true;
            if (this.isOnReachEnd == false){
              //解决触发两次重复调用的问题,延迟时间最低2000，具体原因要查看list中onReachEnd的API
              this.isOnReachEnd = true;
              setTimeout(() => {
                this.counter++
                this.isLoading = false
                this.isOnReachEnd = false
              }, 2000)
            }
          })

        }
        .onStateChange((refreshStatus: RefreshStatus) => {
          // console.info('Refresh onStatueChange state is ' + refreshStatus)
        })
        .onRefreshing(() => {
          this.isLoading = true;
          setTimeout(() => {
            this.counter++
            this.isRefreshing = false
            this.isLoading = false
          }, 1000)
          console.log('onRefreshing test')
        })
        .backgroundColor(Color.Pink)

        //遮罩层
        Flex({justifyContent:FlexAlign.Center}){
          //下拉刷新不显示
          LoadingProgress().color(Color.Red).width(40).visibility( (this.isLoading == true  && this.isRefreshing ==false ) ? Visibility.Visible : Visibility.None)
        }
        .backgroundColor(Color.Transparent)
        .layoutWeight(1).visibility( this.isLoading == true ? Visibility.Visible : Visibility.None)


      }


    }
  }
}

ps:
1、BS开头的API是为了方便开发和维护，对鸿蒙UI做了一层简单的封装，并且会陆续进行更新.
2、基于API Version9版本.
3、看到文章觉得还OK麻烦留个赞👍谢谢啦～