Skip to content

Tabs 开启滑动切换 swipeable,当点击某个tab,会疯狂触发onChange,导致UI狂闪,页面卡顿 #1201

@lduoduo

Description

@lduoduo

问题表现:onChange的值在当前index和点击的index之间交替

V2+版本是没有该问题的,希望该问题能优先解决

IMG_0269.mp4
Image
import React, { useEffect, useState } from 'react';
import { Button, Checkbox, List, DatePickerView, Modal, Tabs } from 'zarm';

export default function demo() {
  const [tabIndex, setTabIndex] = useState(0);

  const onChange = (index) => {
    if (index === tabIndex) {
      return;
    }
    console.log('onTabChange', index);
    setTabIndex(index);
  };

return (
    <div style={{ padding: 24 }}>
      <Tabs value={tabIndex} swipeable onChange={onChange}>
        <Tabs.Panel title="选项卡1">
          <div className="content" style={{height: 200}}>选项卡1内容</div>
        </Tabs.Panel>
        <Tabs.Panel title="选项卡2">
          <div className="content" style={{height: 200}}>选项卡2内容</div>
        </Tabs.Panel>
        <Tabs.Panel title="选项卡3">
          <div className="content" style={{height: 200}}>选项卡3内容</div>
        </Tabs.Panel>
      </Tabs>
</div>
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions