支付寶小程序組件 圖片視圖·cover-image

版本要求：基礎(chǔ)庫 1.10.0 或更高版本；若版本較低，建議做 兼容處理；

覆蓋在原生組件之上的圖片視圖，可覆蓋的原生組件同 cover-view 一致。

掃碼體驗

示例代碼

<!-- API-DEMO page/component/cover-view.axml -->
<view class="page">
  <view class="page-description">cover-view</view>
  <view class="page-section">
    <view class="page-section-demo" style="position: relative;">
      <map
        longitude="{{longitude}}"
        latitude="{{latitude}}"
        scale="{{scale}}"
        style="width: 100%; height: 200px;"
        include-points="{{includePoints}}"
      />
      <cover-view class="cover-view">
        <cover-view class="cover-view-item cover-view-item-1"></cover-view>
        <cover-view class="cover-view-item cover-view-item-2"></cover-view>
        <cover-view class="cover-view-item cover-view-item-3"></cover-view>
      </cover-view>
      <cover-image style="" src="/image/ant.png" />
    </view>
  </view>
</view>
// API-DEMO page/component/cover-view.js
Page({
  data: {
    scale: 14,
    longitude: 120.10675,
    latitude: 30.266786,
    includePoints: [{
      latitude: 30.266786,
      longitude: 120.10675,
    }],
  }
});
/* API-DEMO page/component/cover-view.acss */
cover-image {
  position: absolute;
  left: 20px;
  top: 100px;
  height: 50px;
  width: 50px;
}


.cover-view {
  position: absolute;
  top: calc(50% - 75rpx);
  left: calc(50% - 150rpx);
  display:flex;
  flex-direction:row;
  background-color: rgba(0, 0, 0, 0);
}


.cover-view-item{
  width: 100rpx;
  height: 150rpx;
  font-size: 26rpx;
}


.cover-view-item-1 {
  background-color: rgba(26, 173, 25, 0.7);
}


.cover-view-item-2 {
  background-color: rgba(39, 130, 215, 0.7);
}


.cover-view-item-3 {
  background-color: rgba(255, 255, 255, 0.7);
}

屬性