SwipeAction 在 h5 端使用会导致页面无法滚动

yurentle commented 9 months ago

taro-ui 版本是3.2.0 微信小程序中没有这个问题

使用方式如下：

import { View, Text } from '@tarojs/components';
import { AtSwipeAction } from 'taro-ui';
import './index.less'

export default function List() {
  const list = [
    '我是标题',
    '我是标题',
    '我是标题',
    '我是标题',
    '我是标题',
    '我是标题',
    '我是标题',
    '我是标题',
    '我是标题',
    '我是标题',
    '我是标题',
    '我是标题',
  ]

  return (
    <View className='scroll'>
      {
        list.map((item: any, index: number) => (
          <AtSwipeAction
            key={index}
            autoClose
            options={[
              {
                text: '删除',
                style: {
                  backgroundColor: '#4C4C4C'
                },
              }
            ]}
          >
            <View
              className='item'
              key={index}
            >
              <Text className='word'>{item.slice(0, 1)}</Text>
              <View className='wrapper'>
                <View className='title'>{item}</View>
              </View>
            </View>
          </AtSwipeAction>
        ))
      }
    </View>
  )
}

.scroll {
  height: 500px;
  overflow-y: auto;
}
.item {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 30px;
  .word {
    margin-right: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94px;
    height: 94px;
    font-size: 30px;
    color: #246FEF;
    line-height: 42px;
    background: #E9EDFF;
    border-radius: 10px;
  }
  .wrapper {
    width: 600px;
    padding: 28px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #F1F2F8;
    .title {
      margin-bottom: 10px;
      font-size: 28px;
      color: #00132D;
      line-height: 40px;
    }
  }
}