温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序cover-view的使用方法

发布时间:2020-06-01 14:42:49 来源:亿速云 阅读:999 作者:鸽子 栏目:开发技术
  • 覆盖在原生组件之上的文本视图。

  • 可覆盖的原生组件包括 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 >{{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
        
        latitude="{{latitude}}"
        longitude="{{longitude}}"
      >
        <cover-view class="cover-view">
          <cover-view class="container">
            <cover-view class="flex-wrp" >
              <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>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI