AntmJS / vantui

基于vant-weapp实现的Taro-React版及H5-React版组件库https://antmjs.github.io/vantui/#/home

Home Page:https://antm-js.gitee.io/vantui/#/home

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

WaterfallFlow组件设置gutter后会导致右侧偏移

hcweb opened this issue · comments

这个 Issue 涉及以下平台:

  • [ ✔] 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 头条小程序
  • 快手小程序
  • QQ 轻应用
  • Web 平台(H5)

BUG 描述
在使用WaterfallFlow的时候设置gutter后会导致右侧偏移,如果WaterfallFlow组件外部嵌套一个
<View className="p-3"> <WaterfallFlow columnNum={2} gutter={12} dataSource={dataList} renderItem={item}/> </View>

复现步骤

期望结果

实际结果

截图
微信图片_20240401112356
微信图片_20240401112406

环境
👽 Taro v3.6.23

Taro CLI 3.6.23 environment info:
System:
OS: Windows 11 10.0.22631
Binaries:
Node: 18.19.0 - D:\soft\node18\node.EXE
Yarn: 1.22.21 - D:\npm_wrokspace\yarn.CMD
npm: 10.4.0 - D:\soft\node18\npm.CMD
npmPackages:
@tarojs/cli: 3.6.23 => 3.6.23
@tarojs/components: 3.6.23 => 3.6.23
@tarojs/helper: 3.6.23 => 3.6.23
@tarojs/plugin-framework-react: 3.6.23 => 3.6.23
@tarojs/plugin-platform-alipay: 3.6.23 => 3.6.23
@tarojs/plugin-platform-h5: 3.6.23 => 3.6.23
@tarojs/plugin-platform-jd: 3.6.23 => 3.6.23
@tarojs/plugin-platform-qq: 3.6.23 => 3.6.23
@tarojs/plugin-platform-swan: 3.6.23 => 3.6.23
@tarojs/plugin-platform-tt: 3.6.23 => 3.6.23
@tarojs/plugin-platform-weapp: 3.6.23 => 3.6.23
@tarojs/react: 3.6.23 => 3.6.23
@tarojs/runtime: 3.6.23 => 3.6.23
@tarojs/shared: 3.6.23 => 3.6.23
@tarojs/taro: 3.6.23 => 3.6.23
@tarojs/taro-loader: 3.6.23 => 3.6.23
@tarojs/webpack5-runner: 3.6.23 => 3.6.23
babel-preset-taro: 3.6.23 => 3.6.23
eslint-config-taro: 3.6.23 => 3.6.23
react: ^18.0.0 => 18.2.0

附加信息
目前我是这样子处理的
<WaterfallFlow dataSource={newList} columnNum={2} renderItem={(item) => ( <View className={[item.mIndex % 2 == 0 ? 'ml-[12px]' : 'mr-[12px]', 'mb-[24px]']} key={item.id} onClick={() => toPage("/pages/good/detail/index?id=" + item.id)} > <Vertical info={item} /> </View> )} />

未能复现问题,能否提供一个最小可复现库?