微信小程序cover-view的坑

1. cover-view文字显示不全

问题描述: 先看下文字显示不全的样式 , 如上图 , 文字末尾会有部分被截断 , 这个bug在iphone6,7上比较明显, 在iphone7plus等手机上不明显 , 但是细看还是会发现被截断了一部分 . 我尝试添加padding 和在文字末尾加上一个空格(" ") , 都没有解决 . 后来查询发现是小程序本身的一个bug , 目前官方还没有解决 .

解决方案:

• 如果你的文案是固定的话 , 直接写死cover-view的宽度就可以了 , 宽度值具体是多少自己试试就知道了 ;
• 如果文案是动态的话 , 就需要计算文案的长度 , 这里面就引出了cover-view的第二个坑 . 计算宽度是文字字数乘以文字的大小 , 但是大小的英文字母以及汉字的宽度是不一样的 , 需要区别对待 , 可能还会有一些特殊字符 . 计算的宽度再加上2rpx(我自己试的2rpx比较合适 , 具体的看自己吧) , 这2rpx就是解决被截断的问题 . 但是最终计算出的宽度一定是 > 文字的实际宽度 , 要不然还是会有被截断的情况 . 既然计算的宽度 > 实际宽度 , 就需要cover-view的文字居中 , 第二个坑就来了 , cover-view不能居中 .

2. cover-view文字无法居中 微信开发者工具上显示居中 但是真机不行

cover-view的样式代码

.tag-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  line-height: 40rpx;
  height: 40rpx;
}

在IDE可以使文本内容居中 , 但是真机不行 , 真机要加上

text-align: center;