理解小程序cover-view

Posted 2023-05-17

参考技术A 1、cover-view是覆盖在原生组件之上的文本视图，只支持嵌套cover-view、cover-image
2、cover-view不支持text-decoration属性设置
3、cover-view设置文本内容换行 white-space: normal;（注意flex布局时可能不起效果哦

被覆盖原因是video加载的比cover-view慢，所以我给cover-view做了一个延时显示，暂且是这样解决
注意加载顺序，cover-view应晚于被覆盖组件加载
https://www.jianshu.com/p/3c255f5c94f9

docs Q/A

小程序 cover-view 使用

覆盖在原生组件之上的文本视图。

可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

---

个人示例

<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}" bindmarkertap="makertap" bindregionchange="mapchangeTap" >
    <cover-view class="tips-dialog">
      <cover-image src="/assets/img/[e-mail]" class="tips-dialog-img"></cover-image>
      <cover-view wx:if="{{xb_count}}" class="tips-dialog-txt">
        <cover-view class="xb">附近有{{xb_count}}位小帮</cover-view>
        <cover-view class="minute">
          <cover-view>预计最快</cover-view>
          <cover-view style="color:#FF6600;">{{min_time_text}}</cover-view>
          <cover-view>内到达</cover-view>
        </cover-view>
      </cover-view>
      <cover-view wx:else class="tips-dialog-txt2">附近暂无小帮</cover-view>
    </cover-view>
   <cover-image class="map-img" src="/assets/img/[e-mail]"/> 
  </map>

官方示例

<map
        style="width: 100%; height: 300px;"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
      >
        <cover-view class="cover-view">
          <cover-view class="container">
            <cover-view class="flex-wrp" style="flex-direction:row;">
              <cover-view class="flex-item demo-text-1"></cover-view>
              <cover-view class="flex-item demo-text-2"></cover-view>
              <cover-view class="flex-item demo-text-3"></cover-view>
            </cover-view>
          </cover-view>
        </cover-view>
      </map>