taroify icon indicating copy to clipboard operation
taroify copied to clipboard

[Bug Report] ScrollView嵌套Swipecell无法正常上下滚动

Open 0914xc opened this issue 2 years ago • 1 comments

问题出在哪个包

@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

0914xc avatar Jul 19 '22 15:07 0914xc

同样的问题,尝试把packages/core/src/swipe-cell/swipe-cell.tsx里的catchMove去掉就可以在微信小程序上下滑动了。。。为啥这里要catchMove呢 image

binjie09 avatar Aug 01 '22 08:08 binjie09

<SwipeCell catchMove={false}>

这样设置解决了

hughiechen avatar Oct 14 '22 11:10 hughiechen

<SwipeCell catchMove={false}>

这样设置解决了

理论上这样是解决不了的,看代码他是直接把View的catchMove设置为了true,并没有使用外部传进来的参数,所以我创建了一个 PR,让<SwipeCell catchMove={false}>中的catchMove能正确的传入View中

binjie09 avatar Oct 14 '22 16:10 binjie09