HarmonyOS Swiper组件在displayMode的AUTO_LINEAR被废弃之后如何实现原来的效果

Swiper的displayMode不能设置为AUTO_LINEAR之后,对应的效果应该怎样实现,看文档及注释说是用ScrollTo替代,但感觉不是同一个东西,能否给个demo说明?

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

请参考List来实现:

@Entry
@Component
export struct ListH {
  private listScroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  build() {
    List({ space: 40, initialIndex: 0 }) {

      ForEach(this.arr, (item: number) => {
        ListItem() {
          Column() {
            Image($r("app.media.app_icon"))
              .width(60)
              .height(60)
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
          }
        }
        .width(60)
        .height(60)
      }, (item: string) => item)

    }
    .listDirection(Axis.Horizontal)
    .scrollBar(BarState.Off)
    .width('100%')
    .height(200)
    .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
    .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
      console.info('first' + firstIndex)
      console.info('last' + lastIndex)
      console.info('center' + centerIndex)
    })
    .onScrollVisibleContentChange((start: VisibleListContentInfo, end: VisibleListContentInfo) => {
      console.log(' start index: ' + start.index +
        ' start item group area: ' + start.itemGroupArea +
        ' start index in group: ' + start.itemIndexInGroup)
      console.log(' end index: ' + end.index +
        ' end item group area: ' + end.itemGroupArea +
        ' end index in group: ' + end.itemIndexInGroup)
    })
    .onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
      console.info(`onScroll scrollState = ScrollState` + scrollState + `, scrollOffset = ` + scrollOffset)
    })
  }
}

请参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#%E7%A4%BA%E4%BE%8B1

分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS grid组件auto-fit没效果
478浏览 • 1回复 待解决
如何关闭Swiper组件回弹效果
493浏览 • 1回复 待解决
使用swiper组件实现viewPager效果
1468浏览 • 1回复 待解决
升级系统之后原来安装app没有了
235浏览 • 1回复 待解决
如何实现组件阴影效果
964浏览 • 1回复 待解决
滑动组件如何实现单边spring效果
930浏览 • 1回复 待解决
RelativeContainer组件auto对齐规则
368浏览 • 1回复 待解决
如何实现Tabs组件tarbar吸顶效果
1176浏览 • 1回复 待解决
如何使用Swiper组件实现下拉刷新
859浏览 • 1回复 待解决
HarmonyOS swiper组件使用问题
324浏览 • 1回复 待解决