H5端轮播到最后过渡到第一张时会出现闪烁

[xiaodoubaoldl]

相关平台

H5

复现仓库

https://github.com/hpsoar/taro_harmony_app_init.git
浏览器版本: 版本 125.0.6422.112（正式版本） (arm64)
使用框架: React

复现步骤

1

期望结果

正常过度到第一张

实际结果

出现闪烁

环境信息

👽 Taro v3.6.6

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme

  Taro CLI 3.4.13 environment info:
    System:
      OS: macOS 13.5.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.14.0 - /usr/local/bin/node
      Yarn: 1.22.5 - ~/.yarn/bin/yarn
      npm: 6.14.17 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.16 => 3.6.16 
      @tarojs/components: ^3.6.16 => 3.6.16 
      @tarojs/helper: 3.6.16 => 3.6.16 
      @tarojs/plugin-framework-react: 3.6.16 => 3.6.16 
      @tarojs/plugin-platform-alipay: 3.6.16 => 3.6.16 
      @tarojs/plugin-platform-jd: 3.6.16 => 3.6.16 
      @tarojs/plugin-platform-qq: 3.6.16 => 3.6.16 
      @tarojs/plugin-platform-swan: 3.6.16 => 3.6.16 
      @tarojs/plugin-platform-tt: 3.6.16 => 3.6.16 
      @tarojs/plugin-platform-weapp: 3.6.16 => 3.6.16 
      @tarojs/react: 3.6.16 => 3.6.16 
      @tarojs/runtime: 3.6.16 => 3.6.16 
      @tarojs/shared: 3.6.16 => 3.6.16 
      @tarojs/taro: 3.6.16 => 3.6.16 
      babel-preset-taro: 3.6.16 => 3.6.16 
      eslint-config-taro: 3.6.16 => 3.6.16 
      react: ^18.0.0 => 18.2.0 
    npmGlobalPackages:
      typescript: 5.0.2

[xiaodoubaoldl]

ME1716905479299.mp4

[xiaodoubaoldl]

`
<Swiper
className={className}
style={style || {}}
indicatorDots={false}
indicatorActiveColor={indicatorActiveColor}
interval={interval}
autoplay={autoplay}
onChange={(e) => {
onChange(e)
setCurrent(e.detail.current)
exporse(e.detail.current)
}}
>
{
upcList.map((item, upcIndex) => {

                            const { imgWidth, imgHeight, imgUrl } = item;
                            let showImgHeight = 0;
                            const width = (imgWidth * System.winWidth) / 375;
                            if (!!imgWidth && !!imgHeight) {
                                showImgHeight = imgHeight * width / imgWidth;
                            }
                            return (
                                <SwiperItem
                                    key={upcIndex}
                                >
                                    <DJView
                                        onClick={() => {
                                            props?.onClick && typeof props?.onClick === 'function' && props?.onClick();
                                        }}>
                                        <DJImage src={imgUrl} style={style || { width: `${width}px`, height: showImgHeight ? `${showImgHeight}px` : '441px' }} />
                                        <DJView className={styles.skuGoodsWrap} ref={ele => itemsRefs.current[upcIndex] = ele}>
                                            {
                                                skuListRender(item.skuList, upcIndex)
                                            }
                                        </DJView>
                                    </DJView>
                                </SwiperItem>
                            )
                        })
                    }
                </Swiper>

`

[xiaodoubaoldl]

` <Swiper className={className} style={style || {}} indicatorDots={false} indicatorActiveColor={indicatorActiveColor} interval={interval} autoplay={autoplay} onChange={(e) => { onChange(e) setCurrent(e.detail.current) exporse(e.detail.current) }} > { upcList.map((item, upcIndex) => {

                            const { imgWidth, imgHeight, imgUrl } = item;
                            let showImgHeight = 0;
                            const width = (imgWidth * System.winWidth) / 375;
                            if (!!imgWidth && !!imgHeight) {
                                showImgHeight = imgHeight * width / imgWidth;
                            }
                            return (
                                <SwiperItem
                                    key={upcIndex}
                                >
                                    <DJView
                                        onClick={() => {
                                            props?.onClick && typeof props?.onClick === 'function' && props?.onClick();
                                        }}>
                                        <DJImage src={imgUrl} style={style || { width: `${width}px`, height: showImgHeight ? `${showImgHeight}px` : '441px' }} />
                                        <DJView className={styles.skuGoodsWrap} ref={ele => itemsRefs.current[upcIndex] = ele}>
                                            {
                                                skuListRender(item.skuList, upcIndex)
                                            }
                                        </DJView>
                                    </DJView>
                                </SwiperItem>
                            )
                        })
                    }
                </Swiper>

`
<DJView className={styles.skuGoodsWrap} ref={ele => itemsRefs.current[upcIndex] = ele}>
{
skuListRender(item.skuList, upcIndex)
}
不添加此元素的情况下轮播正常，该元素绝对定位在swiperItem下方