cover-view内只支持部分标签
可以使用的有:cover-view
、cover-image
,button
,<ad>
,<navigator>
,其他的一律不显示
cover-view不支持设置单边框
意思就是要么设置四周的边框,要么就不显示,单独使用border-left
,border-right
,border-top
,border-bottom
都不会显示,那么问题来了,如果要绘制类似于表格的东西,单元格之间边框肯定会很粗,这就需要单独设置某一条边的边框,这恰恰是cover-view
不支持的,例如:
// 表格每一个元素
.td {
border-right: 1px solid #ECDFCA;
}
<cover-view class="tr">
<cover-view class="td text-sm text-left cover-view-wrap pos_r">
买1件,再凑¥142
</cover-view>
<cover-view class="td text-sm text-center pos_r">
345.22
</cover-view>
<cover-view class="td text-sm text-center pos_r">
120.22
</cover-view>
<cover-view class="td text-sm text-left cover-view-wrap pos_r">
促销:每满199减100,领券:满299减30
</cover-view>
</cover-view>
微信开发者工具上看好的很:
然而我们再来看看真机上:
![Android上同样不显示](https://i.loli.net/2020/09/20/b9CoAY7yLe3Slq1.png)
有问题就要解决啊,于是又弄了这么个解决办法:所谓边框就是4条线吧,那我们手动创建这四条线:
.border-h {
width: 100%;
height: 1px;
background-color: #ECDFCA;
}
.border-v {
height: 100%;
width: 1px;
background-color: #ECDFCA;
}
.top[class*="border-h"] {
top: 0;
left: 0;
}
.bottom[class*="border-h"] {
bottom: 0;
left: 0;
}
.left[class*="border-v"] {
left: 0;
top: 0;
}
.right[class*="border-v"] {
right: 0;
top: 0;
}
<cover-view class="tr">
<cover-view class="td text-sm text-left cover-view-wrap pos_r">
买1件,再凑¥142
<cover-view class="border-v right pos_a"></cover-view>
<cover-view class="border-h bottom pos_a"></cover-view>
</cover-view>
<cover-view class="td text-sm text-center pos_r">
345.22
<cover-view class="border-v right pos_a"></cover-view>
<cover-view class="border-h bottom pos_a"></cover-view>
</cover-view>
<cover-view class="td text-sm text-center pos_r">
120.22
<cover-view class="border-v right pos_a"></cover-view>
<cover-view class="border-h bottom pos_a"></cover-view>
</cover-view>
<cover-view class="td text-sm text-left cover-view-wrap pos_r">
促销:每满199减100,领券:满299减30
<cover-view class="border-h bottom pos_a"></cover-view>
</cover-view>
</cover-view>
开发工具上完全符合我的需求啊,当时就乐的不行,感觉自己是个天才,而且ios上也好的很,可是,偏偏Android让人头疼,无法显示,可能是cover-view
的定位有问题,遇到这样子的也真是无解了。
cover-view子节点超出父节点后不显示
正常应该是这样的:
但就是因为用了cover-view
,才出现这个样子:
在子节点溢出父节点后,溢出部分就被吃掉了,这种情况只在cover-view/cover-image
出现,只能把超出的那个cover-view
提到上一层去了,但是这又会掉到新的坑里去了,这里很明显有个层级问题