微信小程序cover-view的坑

最新推荐文章于 2022-06-24 12:53:54 发布

原创最新推荐文章于 2022-06-24 12:53:54 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

15 篇文章

订阅专栏

本文解析了小程序中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;