美文网首页
小程序cover-view踩坑

小程序cover-view踩坑

作者: 正义的程序员 | 来源:发表于2020-09-20 10:50 被阅读0次

cover-view内只支持部分标签

可以使用的有:cover-viewcover-imagebutton<ad><navigator>,其他的一律不显示

cover-view不支持设置单边框

意思就是要么设置四周的边框,要么就不显示,单独使用border-leftborder-rightborder-topborder-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>

微信开发者工具上看好的很:

然而我们再来看看真机上:

IOS不显示边框

Android上同样不显示

有问题就要解决啊,于是又弄了这么个解决办法:所谓边框就是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提到上一层去了,但是这又会掉到新的坑里去了,这里很明显有个层级问题😭,非常难调试,这里我的解决方式是创建两个一样的cover-image,一个放在外面,一个放在里面,因为互相有一部分不显示,正好凑成一张完整的图,当然最外层的父容器要先加个padding

一坑未平又落入新的坑

  • cover-view不支持渐变背景,表现是开发工具上看没问题,结果真机上那个元素就没了显示白的,一位元素被吃了,但是那个位置能接收到正常的事件

相关文章

  • 小程序cover-view踩坑

    cover-view内只支持部分标签 可以使用的有:cover-view、cover-image,button, ...

  • 小程序cover-view踩坑系列2

    之前写过文章讲cover-view的坑,但是坑太多了,网上一片吐槽。今天来说下最近新落入的两个cover-view...

  • 小程序cover-view踩过的坑

    原生组件在真机的表现不同 显示层级问题 原生组件不支持z-index改变显示层级,后面的标签会在顶层显示 iOS ...

  • 小程序资源

    小程序webview踩坑小程序图片转二进制微信基础库对应关系

  • 小程序踩坑

    1.不能在wxss文件background属性中引用本地图片文件2.text标签类似span这种行内标签,不能设置...

  • 小程序踩坑

    开发者开发不同账号的小程序。填写appID,微信根据不同的appID判断该小程序属于哪个账号。 修改数据后不自动渲...

  • 小程序踩坑

    wss图片获取:image.png 2.page.json设置:每一个小程序页面也可以使用.json文件来对本页面...

  • 小程序踩坑

    主要内容 记录小程序开发中碰到的问题以及解决方案 CSS部分 解决小程序按钮border无法清除问题 小程序按钮 ...

  • 我的前端笔记

    目录 react 小程序 vue typescript 经验(踩坑) react useMemo 和 useCal...

  • 微信小程序cover-view问题

    cover-view问题 给个微信官方文档的导航:微信小程序 cover-view,里面介绍的更加详细 cover...

网友评论

      本文标题:小程序cover-view踩坑

      本文链接:https://www.haomeiwen.com/subject/hsxkyktx.html