taroify
taroify copied to clipboard
[Bug Report] ScrollView嵌套Swipecell无法正常上下滚动
问题出在哪个包
@taroify/core
问题出在哪个平台/设备/浏览器
微信小程序
平台/设备/浏览器
微信小程序模拟器和手机(IOS15)都不行
你正在使用的 Taroify 版本是多少
0.1.0-alpha.1
描述一下您遇到的问题以及重现步骤
import { TreeSelect, Image, Sidebar, Flex, Cell, SwipeCell, Button } from '@taroify/core'
import { ScrollView, View, Text } from '@tarojs/components'
import { Component, useState } from 'react'
import './index.scss'
const Ornament = () => {
const [tabValue, setTabValue] = useState(0)
return (
<View>
<Flex>
<Flex.Item span={5}>
<ScrollView style={{ height: "100vh" }} scrollY showScrollbar={false}>
<Sidebar>
<Sidebar.Tab style={{ padding: "14px" }}>饰品1</Sidebar.Tab>
<Sidebar.Tab style={{ padding: "14px" }}>饰品2</Sidebar.Tab>
<Sidebar.Tab style={{ padding: "14px" }}>饰品3</Sidebar.Tab>
</Sidebar>
</ScrollView>
</Flex.Item>
<Flex.Item span={19}>
<ScrollView style={{ height: "100vh" }} scrollY showScrollbar={false}>
<Cell.Group title='分组 1' bordered={false}>
<Cell
icon={<Image style={{ width: "60px", height: "60px" }} src='https://img.yzcdn.cn/vant/cat.jpeg' />}
title='单元格单元格单'
brief='这是描述'
clickable
align='start'
>
</Cell>
<Cell
icon={<Image style={{ width: "60px", height: "60px" }} src='https://img.yzcdn.cn/vant/cat.jpeg' />}
title='单元格单元格单'
brief='这是描述'
clickable
align='start'
>
</Cell>
<Cell
icon={<Image style={{ width: "60px", height: "60px" }} src='https://img.yzcdn.cn/vant/cat.jpeg' />}
title='单元格单元格单'
brief='这是描述'
clickable
align='start'
>
</Cell>
<Cell
icon={<Image style={{ width: "60px", height: "60px" }} src='https://img.yzcdn.cn/vant/cat.jpeg' />}
title='单元格单元格单'
brief='这是描述'
clickable
align='start'
>
</Cell>
<Cell
icon={<Image style={{ width: "60px", height: "60px" }} src='https://img.yzcdn.cn/vant/cat.jpeg' />}
title='单元格单元格单'
brief='这是描述'
clickable
align='start'
>
</Cell>
<Cell
icon={<Image style={{ width: "60px", height: "60px" }} src='https://img.yzcdn.cn/vant/cat.jpeg' />}
title='单元格单元格单'
brief='这是描述'
clickable
align='start'
>
</Cell>
<Cell
icon={<Image style={{ width: "60px", height: "60px" }} src='https://img.yzcdn.cn/vant/cat.jpeg' />}
title='单元格单元格单'
brief='这是描述'
clickable
align='start'
>
</Cell>
</Cell.Group>
<Cell.Group title='分组 2'>
<SwipeCell className="custom-swipe-cell">
<View className="custom-card">
<Image className="custom-card__thumb" src="https://img01.yzcdn.cn/vant/ipad.jpeg" />
<View className="custom-card__content">
<View className="custom-card__title">商品标题</View>
</View>
</View>
<SwipeCell.Actions side="right">
<Button variant="contained" shape="square" color="danger">
删除
</Button>
<Button variant="contained" shape="square" color="primary">
收藏
</Button>
</SwipeCell.Actions>
</SwipeCell>
<SwipeCell className="custom-swipe-cell">
<View className="custom-card">
<Image className="custom-card__thumb" src="https://img01.yzcdn.cn/vant/ipad.jpeg" />
<View className="custom-card__content">
<View className="custom-card__title">商品标题</View>
</View>
</View>
<SwipeCell.Actions side="right">
<Button variant="contained" shape="square" color="danger">
删除
</Button>
<Button variant="contained" shape="square" color="primary">
收藏
</Button>
</SwipeCell.Actions>
</SwipeCell>
<SwipeCell className="custom-swipe-cell">
<View className="custom-card">
<Image className="custom-card__thumb" src="https://img01.yzcdn.cn/vant/ipad.jpeg" />
<View className="custom-card__content">
<View className="custom-card__title">商品标题</View>
</View>
</View>
<SwipeCell.Actions side="right">
<Button variant="contained" shape="square" color="danger">
删除
</Button>
<Button variant="contained" shape="square" color="primary">
收藏
</Button>
</SwipeCell.Actions>
</SwipeCell>
<SwipeCell className="custom-swipe-cell">
<View className="custom-card">
<Image className="custom-card__thumb" src="https://img01.yzcdn.cn/vant/ipad.jpeg" />
<View className="custom-card__content">
<View className="custom-card__title">商品标题</View>
</View>
</View>
<SwipeCell.Actions side="right">
<Button variant="contained" shape="square" color="danger">
删除
</Button>
<Button variant="contained" shape="square" color="primary">
收藏
</Button>
</SwipeCell.Actions>
</SwipeCell>
</Cell.Group>
</ScrollView>
</Flex.Item>
</Flex>
</View>
)
}
export default Ornament;
如果可能的话,请包含一个代码框的链接与复制的问题
No response
你知道如何解决这个问题吗
No response
您是否愿意参与修复这个问题,并创建一个 PR
No response
修复这个问题的解决方案
No response
同样的问题,尝试把packages/core/src/swipe-cell/swipe-cell.tsx
里的catchMove去掉就可以在微信小程序上下滑动了。。。为啥这里要catchMove呢
<SwipeCell catchMove={false}>
这样设置解决了
<SwipeCell catchMove={false}>
这样设置解决了
理论上这样是解决不了的,看代码他是直接把View的catchMove设置为了true,并没有使用外部传进来的参数,所以我创建了一个 PR,让<SwipeCell catchMove={false}>
中的catchMove能正确的传入View中