Skip to content

[t-color-picker] use-popup 弹窗模式下预设颜色(swatch-colors)无法横向滚动 #4285

@Darley-Wey

Description

@Darley-Wey

tdesign-miniprogram 版本

1.12.0(最新版 1.12.3 未验证)

重现链接

No response

重现步骤

  1. 使用 t-color-picker 组件,设置 use-popup 属性启用弹窗模式
  2. 通过 swatch-colors 属性传入多个预设颜色(数量超出一行可显示范围)
  3. 弹窗弹出后,尝试横向滑动预设颜色区域

示例代码:

<t-color-picker
  use-popup
  visible="{{showColorPicker}}"
  type="multiple"
  format="HEX"
  fixed
  swatch-colors="{{swatchColors}}"
  bind:change="onChange"
/>

期望结果

预设颜色区域可以横向滚动,查看所有预设颜色

实际结果

预设颜色区域无法横向滚动,超出部分的预设颜色无法查看/选择

基础库版本

3.7.2

补充说明

查看源码发现 template.wxml 中 swatch-colors 区域使用普通 <view> 配合 CSS overflow-x: auto 实现横向滚动,但在 use-popup 模式下滚动失效(可能与 saturation 面板的 catchtouchmove 事件拦截有关)。

临时 workaround:将 <view class="swatches-items"> 改为 <scroll-view scroll-x enhanced enable-flex>,CSS 中去掉 display:flex; overflow-x:auto 改为 white-space:nowrap,新增 inner 包裹层用 flex 布局。修改后预设颜色可正常横向滚动。

Metadata

Metadata

Assignees

No one assigned

    Labels

    🐞 bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions