jd-opensource / jd-opensource/taro-ui

tabbar组件内部使用picker组件,picker组件无法正常显示

Open
#1,009 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.7k
Forks
740
PR merge metrics
No merged PRs in 30d

Description

### Taro UI 版本信息

2.3.2

### 问题描述

由于tabbar组件的class="at-tabs__body"元素,做滑动动效时配合使用transform: translate3d(-200%, 0px, 0px)和will-change: transform, left, top这两个属性,导致picker组件的class="weui-picker"和class="weui-mask"这两个元素无法正常展示出来,希望给picker增设一个appendToBody的属性将picker组件移到body层级下或者其他办法,以避免父级元素的个别样式对picker组件造成影响。

### 复现步骤

将picker组件放在tabbar组件下面,点击picker组件就会出现picker组件无法显示的情况

### 复现代码





触发picker弹窗





标签页二的内容


标签页三的内容

### 报错信息

没有报错信息,只是样式相冲突。

### 系统信息

Taro v2.1.1
Taro CLI 2.1.1 environment info:
System:
OS: Windows 10
Binaries:
Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - D:\Program Files\nodejs\node_global\yarn.CMD
npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD

### 补充信息

由于tabbar组件的class="at-tabs__body"元素,做滑动动效时配合使用transform: translate3d(-200%, 0px, 0px)和will-change: transform, left, top这两个属性,导致picker组件的class="weui-picker"和class="weui-mask"这两个元素无法正常展示出来,希望给picker增设一个appendToBody的属性将picker组件移到body层级下或者其他办法,以避免父级元素的个别样式对picker组件造成影响。

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.