HarmonyOS swiper如何滚动到任意页面?

比如当前在第一个页面我想滚动到第四个页面。

HarmonyOS
2024-10-22 09:37:46
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

当前swiper组件以及其indicator属性不支持切换到指定轮播图的功能。对于swiper组件,可以设置.indicator属性为false隐藏导航点,然后通过.index()属性和状态变量来自定义导航点从而实现切换到指定轮播图。

官网文档参考链接如下:

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

简单demo如下:

import { promptAction } from '@kit.ArkUI';  
  
@Entry  
@Component  
struct SwiperPage {  
  
  @State swiperIndex:number = 0;  
  build() {  
    Column() {  
      //设置轮播图效果  
      Swiper() {  
      Row(){  
        Text('111').width('80%').height(100).backgroundColor(Color.Gray).textAlign(TextAlign.Center)  
      }  
      Row(){  
        Text('222').textAlign(TextAlign.Center).width('80%').height(100).backgroundColor(Color.Gray)  
      }  
        Row(){Text('333').textAlign(TextAlign.Center).width('80%').height(100).backgroundColor(Color.Gray)}  
        Row(){Text('444').textAlign(TextAlign.Center).width('80%').height(100).backgroundColor(Color.Gray)}  
  
  
      }  
      .indicator(  
        Indicator.dot()  
          .left(0)  
          .itemWidth(15)  
          .itemHeight(15)  
          .selectedItemWidth(30)  
          .selectedItemHeight(15)  
          .color(Color.Red)  
      ).onChange((index:number) => {  
        promptAction.showToast({message:`current index: ${index}`})  
        this.swiperIndex = index;  
      }).index(this.swiperIndex)  
  
      Button('跳转第四页').onClick(()=>{  
        this.swiperIndex = 3  
      })  
    }  
    .justifyContent(FlexAlign.Center)  
    .borderRadius(20)  
    .width('90%')  
    .height('70%')  
    .margin({ bottom: 10 })  
    .height('100%')  
    .width('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-22 18:10:03
相关问题
list组件无法滚动到底部
1077浏览 • 1回复 待解决
怎么判断webview滚动到最下方?
297浏览 • 2回复 待解决
Web组件怎么知道滚动到顶部了
786浏览 • 1回复 待解决
自适应页面滚动如何实现
370浏览 • 1回复 待解决