收藏
回答

cover-view在开发工具上、ios上和安卓里文本样式表现各自都不一样

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug cover-view 客户端 ios7.0.0,android7.0.3 2.6.2

- 当前 Bug 的表现(可附上截图)


目前的业务需求是在live-pusher上添加一个可滚动区域文本区域,所以需要用到cover-view组件,文本的样式在开发者工具(最新版)上表现正常,但是在ios上和android上表现各有差异,都是有问题,具体见下图

开发者工具上的表现:


ios上:


android上:


- 预期表现

- 复现路径


- 提供一个最简复现 Demo

WXML:

<cover-view scroll-y="true" class="comment-wrap">
 <cover-view class="comment" wx:for="{{commentArray}}">
   <cover-view class="comment-name">{{item.userName}}</cover-view>
   {{item.comment}}
</cover-view>
</cover-view>

js:

commentArray: [
{
userName: 'inline-block',
     comment: ''
   },
   {
userName: '我是inline-block',
       comment: '我超长我需要被换行,我不想被重叠,我需要被换行,我不想被重叠'
   },
   {
userName: '我是inline-block',
       comment: '为什么我会被重叠呢'
   },
],

WXSS:

.comment-wrap {
position: absolute;
 bottom: 130rpx;
 left: 30rpx;
 max-width: 70%;
 height: 40%;
 overflow-y: scroll;
}

.comment {
float: left;
 display: inline-block;
 min-width: 51%;
 max-width: 100%;
 line-height: 40rpx;
 padding: 12rpx 15rpx;
 margin-bottom: 10rpx;
 font-size: 32rpx;
 color: #fff;
 background-color: rgba(0,0,0,.3);
 border-radius:10rpx;
 white-space: normal;
}

.comment-name {
vertical-align: text-top;
 display: inline-block;
 color: #d9d9d9;
}

.comment:last-child {
margin-bottom: 0;
}


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

2 个回答

  • 娇华
    娇华
    03-15

    请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    03-15
    赞同
    回复 4
    • heartbeat
      heartbeat
      03-15

      上面的问题描述已经提供了机型了版本了,就苹果手机和安卓手机都会出现,然后代码段已经在上面了


      03-15
      回复
    • 娇华
      娇华
      03-15回复heartbeat

      麻烦按照教程来提供下代码片段

      03-15
      回复
    • heartbeat
      heartbeat
      03-15回复娇华

      https://developers.weixin.qq.com/s/Ve5iDTmx786s

      03-15
      回复
    • heartbeat
      heartbeat
      03-18回复娇华

      请问你那边有重现么

      03-18
      回复
  • 黄思程
    黄思程
    03-18



    这块不支持这么写,文本需要用 cover-view 包裹住,也不支持文字环绕的效果。

    03-18
    赞同
    回复 1
    • 
      
      03-19

      也是醉了。。。lz解决了吗?

      我也遇到这个问题,

      border-top cover-view

      直接无视,四个边都出来,不能单独自定义,工具是预期显示


      03-19
      回复