HarmonyOS Swiper组件能支持header和footer这种下拉刷新和上拉加载加载的组件吗?

在Swiper组件中,滑到最后一个组件时,希望能在底部显示上拉加载更多的loading,官方Refresh或者一些三方库如PullToRefresh只支持List/Grid/Scroller这种组件,Swiper里没有能控制offset这种滑动距离的控制器。有什么办法能实现吗?

HarmonyOS
2024-10-12 09:34:38
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

通过该三方库实现功能:https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fpulltorefresh

以下demo是模拟数据实现上拉加载的demo:

import { CommonDataSource } from './CommonDataSource'  
import { VideoComponent } from './AvPlayerComponent'  
@Entry  
@Component  
struct VideoPlayerDemoPage {  
  controller: SwiperController = new SwiperController()  
  dataSource = new CommonDataSource<VideoItem>()  
  @State currentIndex: number = 0  
  @State total:number = 0  
  @State isShowRefresh: boolean = false  
  aboutToAppear(): void {  
    this.dataSource.setData(allData)  
  }  
  onPageShow(): void {  
    this.total = this.dataSource.totalCount()  
  }  
  build() {  
    Flex({ direction: FlexDirection.Column }) {  
      Swiper(this.controller) {  
        LazyForEach(this.dataSource, (item: VideoItem, index: number) => {  
          VideoComponent({ item: item, index, currentIndex: this.currentIndex })  
        })  
      }  
      .height('100%')  
      .width('100%')  
      .vertical(true)  
      .indicator(false)  
      .cachedCount(3)  
      .loop(false)  
      .duration(200)  
      .curve(Curve.EaseOut)  
      .onChange((index: number) => {  
        this.currentIndex = index  
        console.log(`result zj ==> ${index}`)  
      })  
      .onAnimationEnd(() => {  
        console.log(`result zj ==> ${JSON.stringify('onAnimationEnd')}`);  
        if (this.total === this.currentIndex + 1 && this.isShowRefresh) {  
          setTimeout(() => {  
            let nItem: VideoItem = new VideoItem()  
            nItem.imgUrl = $r("app.media.foreground")  
            nItem.videoUrl = 'xxx'  
            nItem.imgUrl = '我们只是拿某站的数据进行一下测试'  
            this.dataSource.addData(this.currentIndex+ 1, nItem)  
            this.isShowRefresh = false  
            this.total = this.dataSource.totalCount()  
          }, 500)  
        }  
      })  
      .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {  
        if (this.total === index + 1 && extraInfo.currentOffset < -70) {  
          this.isShowRefresh = true  
        }  
      })  
      if (this.isShowRefresh) {  
        Flex({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center}) {  
          LoadingProgress().width(50)  
          Text('上拉加载')  
        }  
        .width('100%')  
      }  
    }  
  }  
}  
@Observed  
class VideoItem {  
  videoUrl: string = ''  
  imgUrl: ResourceStr = ''  
  title: string = ""  
}  
const allData: VideoItem[] = [  
  {  
    imgUrl: $r("app.media.foreground"),  
    videoUrl: 'xxx',  
    title: '我们只是拿某站的数据进行一下测试'  
  },  
  {  
    imgUrl: $r("app.media.foreground"),  
    title: '请大家自行准备在线素材',  
    videoUrl: 'xxx'  
  },  
  {  
    imgUrl: $r("app.media.foreground"),  
    title: '你知道冬天的雪是什么颜色吗, 我猜你不知道',  
    videoUrl: 'xxx'  
  },  
  {  
    imgUrl: $r("app.media.foreground"),  
    title: 'xxx',  
    videoUrl: 'xxx'  
  },  
  {  
    imgUrl: $r("app.media.foreground"),  
    title: 'xxx',  
    videoUrl: 'xxx'  
  },  
  {  
    imgUrl: $r("app.media.foreground"),  
    title: '当你阅读到这段文字的时候,我早已入睡,当我在睡梦中惊醒,你却早已安然睡去',  
    videoUrl: 'xxx'  
  },  
  {  
    imgUrl: $r("app.media.foreground"),  
    title: '每个人的内心都有一段独处的幽闭,不可诉说的窒息感孤独感在每当我们沉静下来的时候变愈发强烈',  
    videoUrl: 'xxxx'  
  }  
]
分享
微博
QQ
微信
回复
2024-10-12 15:38:37
相关问题
加载下拉刷新组件
408浏览 • 1回复 待解决
下拉刷新和加载API为9sdk
2774浏览 • 1回复 待解决
如何使用Swiper组件实现下拉刷新
789浏览 • 1回复 待解决
HarmonyOS 组件下拉刷新问题
466浏览 • 1回复 待解决