HarmonyOS Swiper组件 第一个子组件异常

Question

如上面GIF所示，自定义动画在Swiper切换到第一个子组件时表现异常。切换到其余子组件时效果符合预期。

目前定位是滑动第一个子组件到过半时，偏移量offset失效，缩放scale异常。
下面为Swiper主要代码

          Swiper(this.swiperController){
            ForEach(new Array(5).fill(0).map((item: number, i: number) => i), (item: number) => {
              SwiperItem({
                index: item,
                curIndex: this.curIndex,
                total: this.data.length,
                windowWidth: this.windowWidth,
                customScale: this.scaleList[item],
                customOffset: this.translateList[item],
                // visible: item === 0 ? Visibility.None : Visibility.Visible
              })
            })
          }
          .displayCount(1, false)
          .loop(true)
          .index(this.curIndex)
          .cachedCount(5)
          // .itemSpace(16)
          .indicator(false)
          .prevMargin(32)
          .nextMargin(32)
          .onChange((val: number) => {
            this.curIndex = val
          })
          .onAnimationEnd(() => {
            this.marginRight = 0
          })
          .onContentDidScroll((selectedIndex: number, index: number, position: number, mainAxisLength: number) => {
            hilog.info(0x0000, TAG, 'selectedIdx: %{public}d, index: %{public}d, position: %{public}d, mainAxisLength: %{public}d',
              selectedIndex, index, position, mainAxisLength)

            let pre = this.getPre(selectedIndex)
            let nxt = this.getNxt(selectedIndex)
            // hilog.info(0x0000, TAG, 'pre: %{public}d nxt: %{public}d', pre, nxt)

            if(index === selectedIndex){
              this.scaleList[index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * (1 - Math.abs(position / 1))
            }else if(index === pre){
              this.scaleList[index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * Math.max(0, 1 - Math.abs(position / 1))
              this.translateList[selectedIndex] = -this.offsetX * Math.max(0, 1 - Math.abs(position / 1))
              this.translateList[index] = (this.offsetX) * Math.max(0, Math.abs((position / 1)))


              if(position > -0.5 && index === 0){
                // this.translateList[index] = - this.offsetX
                // this.marginRight = this.offsetX
                hilog.info(0x0000, TAG, 'change margin right')
              }
              // 更新上上一个卡片的偏移量
              if(position > -0.5){
                this.translateList[this.getPre(index)] = this.offsetX
              }else {
                this.reset(this.getPre(index))
              }
            }else if(index === nxt){
              this.scaleList[index] = this.MIN_SCALE + (1 - this.MIN_SCALE) * Math.max(0, 1 - Math.abs(position / 1))
              this.translateList[selectedIndex] = this.offsetX * Math.max(0, 1 - Math.abs(position / 1))
              this.translateList[index] = (-this.offsetX) * Math.max(0, Math.abs((position / 1)))
              // 更新下下一个卡片的偏移量
              if(position < 0.5){
                this.translateList[this.getNxt(index)] = -this.offsetX
              }else {
                this.reset(this.getNxt(index))
              }
            }
          })

SwiperItem子组件

@Component
export struct SwiperItem{

  @Require @Prop index: number = 0
  @Prop curIndex: number = 0
  @Require @Prop total: number = 5
  @Prop windowWidth: number = 375
  @Prop customScale: number = 1
  @Prop customOffset: number = 24
  @Prop marginRight: number = 0
  @Prop visible: Visibility = Visibility.Visible
  private offsetX: number = 24

  getOffsetX(): number{
    if(this.index === this.curIndex) return 0
    if((this.index + 1) % this.total === this.curIndex) return this.offsetX
    return -this.offsetX
  }

  build() {
    Column(){
      Image($r('app.media.privilege_swiper_item_test'))
        .width('100%')
        .height(174)
        .objectFit(ImageFit.Cover)

      Text(`权益组合包${this.index}`)
        .fontColor(Color.Black)
        .fontSize(16)
        .fontFamily($r('app.string.base_font_bold'))
        .width('100%')
        .height(98)
    }
    .visibility(this.visible)
    .width(this.windowWidth)
    .height(272)
    .scale({
      x: this.customScale,
      y: this.customScale
    })
    .offset({
      x: this.customOffset,
      y: 0
    })
  }
}

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

看起来你在使用 HarmonyOS 的 Swiper 组件时遇到了一些问题。从你给出的代码和描述来看，当滑动第一个子组件到过半时，偏移量（offset）和缩放（scale）出现异常。这可能是由几个因素导致的，以下是一些建议和可能的解决方案：

1. 偏移量和缩放值的计算问题：

   • 在 SwiperItem 子组件的 getOffsetX() 方法中，你根据当前索引计算偏移量。但在 onContentDidScroll 回调中，你可能需要根据实际的滑动位置动态计算这些值。你的计算逻辑可能需要根据滑动位置的不同进行微调。

2. 滑动动画与缩放动画的同步问题：

   • 当滑动动画与缩放动画同时进行时，可能存在同步问题。你需要确保当滑动动画完成时，缩放动画也正确地完成相应的变化。你可以尝试调整动画的时间参数来确保两者之间的协调性。

3. 滑动距离的阈值问题：

   • 在你的代码中，似乎有一些条件判断是基于滑动距离（position）的。你可能需要更精确地定义这些阈值，以确保在滑动到特定位置时能够正确地触发相应的逻辑。

4. 检查 SwiperItem 的宽度和布局：

   • 确保每个 SwiperItem 的宽度设置正确，并且布局没有冲突。有时布局的问题可能会导致动画和交互的异常。

5. 调试日志和异常处理：

   • 通过查看你的 hilog 输出，了解实际的滑动位置和索引状态，这有助于诊断问题所在。你也可以尝试添加更多的异常处理和日志输出，以获取更详细的调试信息。

6. 检查 Swiper 组件的版本和文档：

   • 确保你使用的 HarmonyOS SDK 版本是最新的，并且查阅官方文档以了解是否有关于 Swiper 组件的最新更新或注意事项。

如果以上建议仍无法解决问题，建议提供更详细的日志或错误信息，以便更准确地定位问题所在。