知否科技
知否科技
  • 发布:2020-04-30 17:28
  • 更新:2022-06-06 21:24
  • 阅读:4104

【报Bug】nvue flex布局内容不会自动撑开

分类:nvue

IDE版本:2.6.15
系统:android

html代码如下:

			<view style="flex-direction: row; disalign-items: flex-start; ">  
				<view style="background-color: #555555;">1</view>  
				<view style="flex-direction: column;">  
					<view style="background-color: #007AFF;">2</view>  
					<view style="background-color: #00A1E9;">  
						<text>不自动撑开不自动撑开不自动撑开不自动撑开不自动撑开不自动撑开不自动撑开3</text>  
					</view>  
				</view>  
			</view>
2020-04-30 17:28 负责人:DCloud_Android_zl 分享
已邀请:
2***@qq.com

2***@qq.com

一个view里面包含多个text,text文本过多也会出现这种情况不会自动撑开
请问这种情况怎么处理呢,nvue里面也不会自动撑开,卡了好久

9***@qq.com

9***@qq.com

宽高写死了。那就死了。。

  • 知否科技 (作者)

    当然不能写死了,各种试了都不行,但在vue页面中可以,不知道是不是weex的bug


    2020-04-30 17:39

zckj

zckj

需要右边设置一个width才可以自动撑开,这应该是weex渲染成原生的问题,你给右边的设置一个宽度试一下

W小姐

W小姐

遇到同样问题,请问是否找到解决办法?

  • 知否科技 (作者)

    已经解决了需在父级加上justify-content: flex-start; 或者align-items: flex-start;


    2020-05-30 17:21

  • 呆头

    回复 知否科技: 你解决了吗, 我遇到这个情况:nvue页面中,父元素设置了换行,但是子元素无法自适应高度,需要父元素给高度才行, 发生在安卓系统、ios正常、 nvue页面、 我父元素上面按你说的设置了无效


    2020-09-19 20:09

  • 1***@163.com

    回复 知否科技: NB 解决;了


    2021-03-10 16:09

  • 阿楞先生

    回复 知否科技: 没用啊


    2021-12-03 15:02

  • 1***@qq.com

    回复 知否科技: 感谢感谢,成功了


    2021-12-29 10:04

  • 7***@qq.com

    回复 知否科技: 这个法子可行,推测是默认的 align-items: stretch 导致父级的高度限定死了,所以里面的text撑不开。 得一层一层找,要保证最外层的父级 align-items: flex-start


    2022-07-07 22:53

  • 7***@qq.com

    回复 7***@qq.com: 再补充一点,要保证文字有最大宽度,文字才能换行。flex:1 可能得用上


    2022-07-07 23:04

  • 1***@qq.com

    回复 知否科技: 感谢


    2022-07-13 16:30

随风而逝

随风而逝

按你说的改的 还是不行呀 他溢出没有啥变化

2***@qq.com

2***@qq.com

nvue中<text>包裹文本要写在一行,这样样式才会是想要的
// 正确写法

<text>abcdef</text>

// 错误写法

<text>  
    abcd  
<text>
1***@qq.com

1***@qq.com - 秋南

应该是没有给宽度吧,但是给了宽度,他是会下来,只不过是挤开他自己父盒子的高度,但是没有挤开整个父盒子的高度,导致被挤破了

1***@qq.com

1***@qq.com - 秋南

宽度设为flex:1

1***@163.com

1***@163.com - 啊啊啊

请问 楼主 多个一个div 里面有多个 text 在同行显示并且正常换行 有方案吗

<view class="chatItemBox">  
					<view class="gradeBox flexRow">  
						<view class="grade">  
							<text class="gradeText initialText">L1</text>  
						</view>  
						<text class="userName initialText">思帆收藏:</text>  
					</view>  
					<text class="chat initialText">真好看真好看真好看真好真好看真好看真好看真好</text>  
				</view>

类似这样

1***@qq.com

1***@qq.com

用 rich-text

BluesX

BluesX

text用rpx加个宽度

要回复问题请先登录注册