支付寶小程序組件 文本視圖·cover-view

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

覆蓋在原生組件之上的文本視圖?？筛采w的原生組件包括 map、canvas。

注意：實際效果請以真機為準(zhǔn)。

掃碼體驗

示例代碼

<!-- 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);
}

屬性

常見問題

cover-view 默認(rèn)背景白色如何取消？

不支持更改背景色，建議更改字體顏色。

cover-view是否支持圓角和陰影？

小程序 acss 支持圓角和陰影，示例代碼： 圓角：border-radius: 15%; 陰影：box-shadow: 10px 10px 5px #888888;