效果圖

image.png

image.png

refresh上下拉刷新和左滑刪除功能全部代碼簿姨，上拉刷新功能待優(yōu)化

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){
              //解決觸發(fā)兩次重復(fù)調(diào)用的問題,延遲時間最低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是為了方便開發(fā)和維護外傅，對鴻蒙UI做了一層簡單的封裝蹦哼，并且會陸續(xù)進行更新.
2鳄哭、基于API Version9版本.
3、看到文章覺得還OK麻煩留個贊??謝謝啦～