Swiper的onChange在h5上存在很多问题

[StillAlexLiu]

相关平台

H5

浏览器版本: chorme 129 使用框架: React

复现步骤

以下问题均在h5中出现，使用的是taro 4.0，使用的React-Native

1. circular开启的时候，onChange会触发多次，并且会触发错误的值为最后一个值
2. circular关闭的时候，onChange在从第二页到第一页的时候不触发，其他情形正常

期望结果

onChange在 circular开启和关闭的情况下都可以正确触发

实际结果

触发多次错误的数据，或者在该触发的时候没有触发

环境信息

 Taro CLI 4.0.6 environment info:
    System:
      OS: macOS 14.6
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
      Yarn: 1.22.22 - ~/.nvm/versions/node/v20.13.1/bin/yarn
      npm: 10.9.0 - ~/.nvm/versions/node/v20.13.1/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.6 => 4.0.6 
      @tarojs/components: 4.0.6 => 4.0.6 
      @tarojs/components-rn: 4.0.6 => 4.0.6 
      @tarojs/helper: 4.0.6 => 4.0.6 
      @tarojs/plugin-framework-react: 4.0.6 => 4.0.6 
      @tarojs/plugin-platform-h5: 4.0.6 => 4.0.6 
      @tarojs/plugin-platform-weapp: 4.0.6 => 4.0.6 
      @tarojs/react: 4.0.6 => 4.0.6 
      @tarojs/rn-runner: 4.0.6 => 4.0.6 
      @tarojs/rn-supporter: 4.0.6 => 4.0.6 
      @tarojs/runtime: 4.0.6 => 4.0.6 
      @tarojs/runtime-rn: 4.0.6 => 4.0.6 
      @tarojs/shared: 4.0.6 => 4.0.6 
      @tarojs/taro: 4.0.6 => 4.0.6 
      @tarojs/taro-loader: 4.0.6 => 4.0.6 
      @tarojs/taro-rn: 4.0.6 => 4.0.6 
      @tarojs/webpack5-runner: 4.0.6 => 4.0.6 
      babel-preset-taro: 4.0.6 => 4.0.6 
      eslint-config-taro: 4.0.6 => 4.0.6 
      expo: 50.0.2 => 50.0.2 
      react: 18.2.0 => 18.2.0 
      react-native: 0.73.1 => 0.73.1 

---

补充信息

部分代码 import Taro from "@tarojs/taro"; import {useState} from "react"; import {View, Swiper, SwiperItem, ScrollView} from '@tarojs/components' import rootStyle from './../../framework/style/root.module.css' import style from './index.module.css' import Nav, {NavConfig} from "../../framework/components/nav.tsx"; import Main from './views/main.tsx'

export default () => { const [index, setIndex] = useState(0) const config: NavConfig[] = [{ name: '首页', component: Main }, { name: '待办', component: Main }, { name: '通讯录', component: Main }, { name: '应用中心', component: Main }] const change = (e: any) => { console.log(e.detail.current) setIndex(e.detail.current) } return ( <View className={[rootStyle.page_bg, style.main].join(' ')}>

        <View className={style.swiperContainer}>
            <Swiper
              className={style.swiper}
              indicatorColor='#999'
              indicatorActiveColor='#333'
              current={index}
              onChange={change}
                // circular
            >
                {config.map((item, k) => {
                    return <SwiperItem key={k}>
                        <View className={style.viewFull}>
                            <ScrollView>
                                <View>{index}-{k}</View>
                                {item.component({})}
                            </ScrollView>
                        </View>
                    </SwiperItem>
                })}
            </Swiper>
        </View>
        <Nav active={index} config={config} onClick={(i) => setIndex(i)} />
    </View>
)

}

[Rambos]

同样问题+1

目前通过effectsProps的方式干预解决

const _effectsProps = useMemo(() => {
        if (Taro.env.TARO_ENV === "h5") {
            // Taro H5端onChange事件触发问题，索引1切换到0，不会触发事件
            // fix: 通过Swiper原生事件触发
            return {
                onAny: (evenName: string, swiper: any) => {
                    if (evenName === "slideChange") {
                        onChange({
                            detail: {current: swiper.realIndex},
                        } as any);
                    }
                },
                ...effectsProps,
            };
        }
    }, [effectsProps, onChange]);

[17612183163]

同问,H5端onChange事件触发问题，索引1切换到0，不会触发事件,这个要怎么处理

[17612183163]

同样问题+1

目前通过effectsProps的方式干预解决

const _effectsProps = useMemo(() => {
        if (Taro.env.TARO_ENV === "h5") {
            // Taro H5端onChange事件触发问题，索引1切换到0，不会触发事件
            // fix: 通过Swiper原生事件触发
            return {
                onAny: (evenName: string, swiper: any) => {
                    if (evenName === "slideChange") {
                        onChange({
                            detail: {current: swiper.realIndex},
                        } as any);
                    }
                },
                ...effectsProps,
            };
        }
    }, [effectsProps, onChange]);

你好,你这个方法怎么用