码迷,mamicode.com
首页 > 微信 > 详细

小程序 cover-view 使用

时间:2020-02-09 00:30:08      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:pre   idt   text   程序   ips   tip   tap   demo   txt   

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

  • 可覆盖的原生组件包括 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/dialog@2x.png" 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/orientation@2x.png"/> 
      </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>

    小程序 cover-view 使用

    标签:pre   idt   text   程序   ips   tip   tap   demo   txt   

    原文地址:https://blog.51cto.com/williamliuwen/2469738

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!