nutui-react icon indicating copy to clipboard operation
nutui-react copied to clipboard

Tabs使用左右布局,autoHeight无法自适应高度

Open tigerk opened this issue 2 years ago • 4 comments

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(重现链接)

codehouse.jd.com/

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区域上下拉有很大的空白区域

tigerk avatar Mar 27 '23 06:03 tigerk

暂时只有direction="horizontal"时支持autoHeight

irisSong avatar Mar 27 '23 09:03 irisSong

暂时只有direction="horizontal"时支持autoHeight

那当前有什么好的解决方案吗?

tigerk avatar Mar 28 '23 08:03 tigerk

我理解一下您的问题:

  1. 高度自适应,是否想要这种效果: image

  2. 上下拉会有很大空白,是您那边修改 tabs 的高度了么?

是因为修改了tabs的高度,满足了一个tab下的内容高度不出现滚动条,然后导致另一个tab下会有很多留白吗?

xiaoyatong avatar Apr 12 '23 02:04 xiaoyatong

是的,这是我想要的效果。 我未设置tabs的任何高度,下拉后会有很大的空白区域,我不管设置autoHeight都有这个现象。

tigerk avatar Apr 12 '23 14:04 tigerk