jd-opensource / jd-opensource/taro-ui

Drawer组件在Tabs标签页中显示有问题

Open
#896 3 comments 0 reactions 0 assignees View on GitHub
stale
Dominant language
TypeScript
Stars
4.7k
Forks
740
PR merge metrics
No merged PRs in 30d

Description

**问题描述**

在Tabs标签页中需要加入一个 Drawer 组件,需要做额外的操作, 但是发现标签页显示的地方不对, 也没有全屏显示

![image](https://user-images.githubusercontent.com/25602259/70879058-fcb38880-1ffe-11ea-9116-3e5974d90005.png)

**复现步骤**

```js
import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import { AtTabs, AtTabsPane, AtDrawer } from "taro-ui";

export default class Index extends Taro.Component {
constructor() {
super(...arguments);
this.state = {
current: 0,
show: false
};
}
handleClick(value) {
this.setState({
current: value
});
}

// 显示抽屉
showDrawer = () => {
this.setState({
show: true
});
};

// 隐藏抽屉
hideDrawer = () => {
this.setState({
show: false
});
};
render() {
const tabList = [
{ title: "标签页1" },
{ title: "标签页2" },
{ title: "标签页3" }
];
return (

显示抽屉



标签页一的内容




标签页二的内容

{/* 抽屉写在第二个tab, 但是只能在第一个Tab中显示,抽屉应该是全屏的,但是却会受到tab的限制 */}

优先展示items里的数据

如果items没有数据就会展示children

这是自定义内容




标签页三的内容




);
}
}

```

**期望行为**

drawer 应该直接全屏显示

**报错信息**

**系统信息**

👽 Taro v1.3.25

Taro CLI 1.3.25 environment info:
System:
OS: Windows 10
Binaries:
Node: 10.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: C:\Users\Administrator\Documents\react\myApp>"node" "C:\Users\Administrator\AppData\Roaming\npm\\node_modules\yarn\bin\yarn.js" -v
1.17.3 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

**补充信息**

drawer 的样式不对, 层级不对

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.