Tabs使用左右布局,autoHeight无法自适应高度
NutUI scenes(nutui 场景)
小程序(@nutui/nutui-react-taro)
NutUI-react version(nutui-react 版本)
1.4.12
React version(react 版本)
18.2.0
Operating environment(运行环境)
dev:weapp
Citation method(引用方式)
npm
Node version(node 版本)
v16.19.0
Browser and its version(浏览器及其版本)
版本 111.0.5563.111(正式版本) (64 位)
System and its version(系统及其版本)
windows11
Taro environmental information(taro 环境信息)
👽 Taro v3.6.2
Reproduction link(重现链接)
Steps to reproduce(重现步骤)
可以把以下代码复制到app.tsx中进行复现:
import React, { useState } from "react"; import { Tabs } from '@nutui/nutui-react';
const App = () => {
const [tab5value, setTab5value] = useState('0');
const list5 = Array.from(new Array(2).keys());
return (
<>
<Tabs autoHeight value={tab5value} onChange={({ paneKey }) => {
setTab5value(paneKey)
}} titleScroll direction="vertical">
{list5.map((item, i) => <Tabs.TabPane key={item} paneKey={i}
title={Tab ${ item}}>
Tab {item}
323
32
31
12
32
3
1
1
2
3
2
3
11
2
32
3112
323
1123
231
12
323
112
323
112
323
1123
231
123
23
123
23
11
232
</Tabs.TabPane>)}
</Tabs>
</>
);
};
export default App;
What is expected?(期望的结果是什么?)
tab.pane区域的高度自适应
What is actually happening?(实际的结果是什么?)
tab.pane区域上下拉有很大的空白区域
暂时只有direction="horizontal"时支持autoHeight
暂时只有direction="horizontal"时支持autoHeight
那当前有什么好的解决方案吗?
我理解一下您的问题:
-
高度自适应,是否想要这种效果:

-
上下拉会有很大空白,是您那边修改 tabs 的高度了么?
是因为修改了tabs的高度,满足了一个tab下的内容高度不出现滚动条,然后导致另一个tab下会有很多留白吗?
是的,这是我想要的效果。 我未设置tabs的任何高度,下拉后会有很大的空白区域,我不管设置autoHeight都有这个现象。