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,就按上面的例子来。很急。
cover-view目前不支持有文本节点的存在,需要都套上cover-view。最后的方案的样式问题麻烦给个代码片段看下
你如果有把我的问题看完,还会给我复制这段废话吗?
看了下小程序腾讯now直播里面的聊天区域,换行做的很好,不太清楚他们的实现方式是什么。
看下面的官方回复,用覆盖的方式即可。他们只有文字没有图标所以可以这样做
嗯~官方回复的方法试过了~没有图标的时候也有个问题,就是外层的box必须给一个高度才可以换行,但是一般这种文本内容事先是不知道多少的,这个高度给多少也不好定。在box内部文本后面添加一个cover-image并且设置display:inline-block在真机上可以跟在文本的后面,但是如果cover-image放在文本前面真机上是无法占用文本的位置的,会发生重叠。
针对官方示例做了个片段,box不用设置高度了~可以由主要内容撑开,并且针对父容器cover-view内既要有图片又要有文字的情况做了尝试~https://developers.weixin.qq.com/s/oBMeOEm8774g
cover-view 设计的 贼TM 烂
遇到同样问题。
如图:
开发工具上可以实现,真机调试时就会排列成两行了。用cover-view无法实现此样式。
代码片段: wechatide://minicode/qFhQdcmQ722g
wechatide://minicode/vUEuItmB7T2i
因为cover-view用原生渲染,不支持文本环绕的方式。目前只能这样hack,这里用全角空格放在开头更合适,但框架对空格的处理有点问题,我们需要优化下
wechatide://minicode/GSbC77m87v3O
你好,如果cover-view和cover-image混用,在一行,自动换行成文本环绕的方式,这个时候依然会出现开发者工具可以,真机不行会换两行,求解锁这种情况如何做
自动换行怎么做 这样都在一行