收藏
回答

cover view里不能放text标签导致的问题

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug cover-view 客户端 6.7.2 2.2.4

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,就按上面的例子来。很急。

最后一次编辑于  2018-09-03  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

4 个回答

  • 黄思程
    黄思程
    2018-09-05


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

    2018-09-05
    赞同
    回复 2
    • K
      K
      2018-09-05

      你如果有把我的问题看完,还会给我复制这段废话吗?

      2018-09-05
      9
      回复
    • 黄思程
      黄思程
      2018-09-16回复K


      2018-09-16
      回复
  • huanghy💪
    huanghy💪
    2018-09-05

    遇到同样问题。

    如图:


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


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

    2018-09-05
    赞同
    回复 3
    • 黄思程
      黄思程
      2018-09-16

      wechatide://minicode/vUEuItmB7T2i

      因为cover-view用原生渲染,不支持文本环绕的方式。目前只能这样hack,这里用全角空格放在开头更合适,但框架对空格的处理有点问题,我们需要优化下

      2018-09-16
      回复
    • BY
      BY
      2018-10-12回复黄思程

      wechatide://minicode/GSbC77m87v3O

      你好,如果cover-view和cover-image混用,在一行,自动换行成文本环绕的方式,这个时候依然会出现开发者工具可以,真机不行会换两行,求解锁这种情况如何做

      2018-10-12
      回复
    • 浩
      2018-11-19回复黄思程

      自动换行怎么做   这样都在一行

      2018-11-19
      回复
  • Sunwd
    Sunwd
    2018-10-30

    cover-view 设计的 贼TM 烂

    2018-10-30
    赞同
    回复
  • 呆毛可以动的~
    呆毛可以动的~
    2018-12-14

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

    2018-12-14
    赞同
    回复 3
    • BY
      BY
      2018-12-14

      看下面的官方回复,用覆盖的方式即可。他们只有文字没有图标所以可以这样做

      2018-12-14
      回复
    • 呆毛可以动的~
      呆毛可以动的~
      2018-12-14回复BY

      嗯~官方回复的方法试过了~没有图标的时候也有个问题,就是外层的box必须给一个高度才可以换行,但是一般这种文本内容事先是不知道多少的,这个高度给多少也不好定。在box内部文本后面添加一个cover-image并且设置display:inline-block在真机上可以跟在文本的后面,但是如果cover-image放在文本前面真机上是无法占用文本的位置的,会发生重叠。

      2018-12-14
      回复
    • 呆毛可以动的~
      呆毛可以动的~
      2018-12-14

      针对官方示例做了个片段,box不用设置高度了~可以由主要内容撑开,并且针对父容器cover-view内既要有图片又要有文字的情况做了尝试~https://developers.weixin.qq.com/s/oBMeOEm8774g

      2018-12-14
      回复