cover view里不能放text标签导致的问题
发布于 6 年前 作者 wliang 2786 次浏览 来自 问答

cover view内部只能放cover-view和cover-imgae,不能放text。

那么,如果我的cover-view里要放一段文字,并且文字中有局部是要换个颜色的,这种情况该怎么写?很简单的一个东西,为了在cover-view里写出来,踩了无!数!的!坑!

我不懂为什么开发工具上和实机上的表现完全不同。(开发工具上甚至可以不用那沙比的cover-view就能在原生组件上实现覆盖!)

下面说正事:

不用cover-view的时候,只要很简单的:

<view>
    今天是<text class="color-orange">2018年9月3日</text>,大家早上好。
</view>

这句话,会在view里自动换行,并且中间的日期是按指定的样式显示的。

而用了cover-view之后,文字在<cover-view>内部甚至都不会自动换行了。<text>也不支持,只能把要特殊化样式的文字也包在<cover-view>中

<cover-view>
    今天是<cover-view class="text color-orange">2018年9月3日</cover-view>,大家早上好。
</cover-view>

然后就出现了各种换行,空格的问题。

我尝试了把文字各种包裹在cover-view中

<cover-view>
    <cover-view class='text'>今天是</cover-view>
    <cover-view class="text color-orange">2018年9月3日</cover-view>
    <cover-view class='text'>,大家早上好。</cover-view>
</cover-view>

给他们加上

display: inline;

word-break: break-all;

white-space: pre-line;

的样式。

最后顶多只能实现在开发工具上实现预想中的效果,而在手机上,还是会莫名其妙地省略、<cover-view>之间出现不受控制的换行、<cover-view>之间出现空白等情况。

麻烦官方尽快给出一个解决方案的小demo,就按上面的例子来。很急。

4 回复

cover-view目前不支持有文本节点的存在,需要都套上cover-view。最后的方案的样式问题麻烦给个代码片段看下

看了下小程序腾讯now直播里面的聊天区域,换行做的很好,不太清楚他们的实现方式是什么。

cover-view 设计的 贼TM 烂

遇到同样问题。

如图:

开发工具上可以实现,真机调试时就会排列成两行了。用cover-view无法实现此样式。

代码片段: wechatide://minicode/qFhQdcmQ722g

回到顶部