HarmonyOS List组件滑动限制为1页的问题

现在有一个List,做图片预览。

现在存在问题,滑动页面的时候,会一下滑动超过一页。代码如下所示

Stack({alignContent:Alignment.Bottom}){
  //显示的列表
  List(){
    LazyForEach(this.mViewModel.getDataSource(), (item:MediaVo, index:number)=>{
      if(item.type == MediaType.IMAGE){
        ImageVH({mVo:item, mViewModel:this.mViewModel})
      }else if(item.type == MediaType.VIDEO){

      }
    }, (item:MediaVo, index:number):string=>{
      return item.generateKey(index);
    })
  }
  .listDirection(Axis.Horizontal)
  .scrollSnapAlign(ScrollSnapAlign.CENTER)
  .scrollBar(BarState.Off)
  .width("100%")
  .height("100%")
  .onScrollIndex((start, end, center)=>{
    Logger.info("PreviewMediaPage", `onScrollIndex=${start}-${end},${center}`);
  }).onScrollStart(()=>{
    Logger.info("PreviewMediaPage", "滚动开始");
  })

  //操作栏
  Row(){
    Image($r('app.media.xxx_title_anxxoid_ic_back_black_normal'))
      .width(24).height(24)
      .margin({ left: 16 })
      .align(Alignment.Bottom)
  }.backgroundColor(0x00ff00).align(Alignment.Bottom)
  .width("100%").height(40)

}.backgroundColor(0x000000)
.width("100%")
.height("100%")

以上代码中的ImageVh,可以认为就是一个宽高100%的Image组件。

请问该如何限制他每次滑动只能滑一页。

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

list有滑动惯性,可参考swiper方法:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5

可参考此demo:

class MyDataSource implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])
  @State myIndex: number = 1;

  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list)
  }

  build() {
    Column({ space: 5 }) {
      Row({ space: 12 }) {
        LazyForEach(this.data, (item: string, index: number) => {
          Button((index + 1).toString())
            .onClick(() => {
              this.myIndex = index
            })
        })
      }

      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Text(item.toString())
            .width('90%')
            .height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) => item)
      }
      .cachedCount(2)
      .index(this.myIndex)
      .autoPlay(false)
      .loop(true)
      .duration(300)
      .itemSpace(0)
      .indicator(false)
      .curve(Curve.Linear)
      .onChange((index: number) => {
        console.info("onChange:" + index.toString())
        this.myIndex = index
      })
      .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
        console.info("index: " + index)
        console.info("current offset: " + extraInfo.currentOffset)
      })
      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
        console.info("index: " + index)
        console.info("targetIndex: " + targetIndex)
        console.info("current offset: " + extraInfo.currentOffset)
        console.info("target offset: " + extraInfo.targetOffset)
        console.info("velocity: " + extraInfo.velocity)
      })
      .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {
        console.info("index: " + index)
        console.info("current offset: " + extraInfo.currentOffset)
      })
    }.width('100%')
    .margin({ top: 5 })
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS Refresh跟list组件惯性滑动问题
375浏览 • 1回复 待解决
HarmonyOS list滑动问题
932浏览 • 1回复 待解决
HarmonyOS 监听List组件滑动
282浏览 • 1回复 待解决
HarmonyOS Scroll嵌套List滑动问题
37浏览 • 1回复 待解决
HarmonyOS 组件List如何禁止滑动
247浏览 • 1回复 待解决
HarmonyOS如何去掉List组件滑动线
1070浏览 • 1回复 待解决
HarmonyOS list 嵌套web滑动切换问题
581浏览 • 1回复 待解决
如何监听List组件滑动距离
2478浏览 • 1回复 待解决
HarmonyOS list组件如何设置匀速滑动
141浏览 • 1回复 待解决
HarmonyOS list组件问题
125浏览 • 1回复 待解决
HarmonyOS 滑动组件问题
180浏览 • 1回复 待解决
HarmonyOS list无法滑动
24浏览 • 1回复 待解决
HarmonyOS List联动滑动
139浏览 • 1回复 待解决
HarmonyOS如何拦截list滑动事件?
502浏览 • 1回复 待解决