使用cover-view 與 cover-image 是實現覆蓋在原生組件之上的文本視圖。

效果圖

?

效果圖代碼

?wxml

<view class="page-body"><mapid="map"style="width:100%; height:{{Height}}px"scale='16'latitude="{{latitude}}"longitude="{{longitude}}"markers="{{markers}}"covers="{{covers}}"show-location></map><cover-view class='cov_view'><cover-image src='../image/selectstar.png' class='cov_image' bindtap='click'></cover-image><cover-image src='../image/img1.jpg' class='center_image'></cover-image><cover-image src='../image/3.png'class='cov_image'bindtap='click' ></cover-image></cover-view></view>

wxss

.cov_view{display: flex;flex-direction: row;justify-content: space-between;height: 140rpx;position: fixed;bottom: 0;right: 0;left: 0;margin-bottom: 50rpx;
}
.cov_image{width: 100rpx;height: 100rpx;
}.center_image{width: 300rpx;height: 100rpx;
}

?

屬性如下

cover-image

基礎庫 1.4.0 開始支持，低版本需做兼容處理。

覆蓋在原生組件之上的圖片視圖。可覆蓋的原生組件同<cover-view>，支持嵌套在<cover-view>里。

屬性	類型	默認值	必填	說明	最低版本
src	string	?	否	圖標路徑，支持臨時路徑、網絡地址（1.6.0起支持）、云文件ID（2.2.3起支持）。暫不支持base64格式。	1.4.0
bindload	eventhandle	?	否	圖片加載成功時觸發	2.1.0
binderror	eventhandle	?	否	圖片加載失敗時觸發	2.1.0

?

cover-view

基礎庫 1.4.0 開始支持，低版本需做兼容處理。

覆蓋在原生組件之上的文本視圖。

可覆蓋的原生組件包括?map、video、canvas、camera、live-player、live-pusher

只支持嵌套?cover-view、cover-image，可在?cover-view?中使用?button。組件屬性的長度單位默認為px，2.4.0起支持傳入單位(rpx/px)。

屬性	類型	默認值	必填	說明	最低版本
scroll-top	number/string	?	否	設置頂部滾動偏移量，僅在設置了 overflow-y: scroll 成為滾動元素后生效	2.1.0

Bug & Tip

1. tip:?<cover-view>和<cover-image>的aria-role僅可設置為button，讀屏模式下才可以點擊，并朗讀出“按鈕”；為空時可以聚焦，但不可點擊
2. tip: 基礎庫 2.2.4 起支持 touch 相關事件，也可使用 hover-class 設置點擊態
3. tip: 基礎庫 2.1.0 起支持設置?scale?rotate?的 css 樣式，包括 transition 動畫
4. tip: 基礎庫 1.9.90 起?cover-view?支持?overflow: scroll，但不支持動態更新?overflow
5. tip: 基礎庫 1.9.90 起最外層?cover-view?支持?position: fixed
6. tip: 基礎庫 1.9.0 起支持插在?view?等標簽下。在此之前只可嵌套在原生組件map、video、canvas、camera內，避免嵌套在其他組件內。
7. tip: 基礎庫 1.6.0 起支持css transition動畫，transition-property只支持transform (translateX, translateY)與opacity。
8. tip: 基礎庫 1.6.0 起支持css opacity。
9. tip: 事件模型遵循冒泡模型，但不會冒泡到原生組件。
10. tip: 文本建議都套上cover-view標簽，避免排版錯誤。
11. tip: 只支持基本的定位、布局、文本樣式。不支持設置單邊的border、background-image、shadow、overflow: visible等。
12. tip: 建議子節點不要溢出父節點
13. tip: 默認設置的樣式有：white-space: nowrap;?line-height: 1.2;?display: block;
14. bug: 自定義組件嵌套?cover-view?時，自定義組件的 slot 及其父節點暫不支持通過 wx:if 控制顯隱，否則會導致?cover-view?不顯示

?

?一般cover-view 都是與cover-image 一起使用,當然單獨使用也行,一起使用布局方便一些,

并不是只能使用cover-view與cover-image才能實現剛才的效果,使用view 與 image也行?

代碼如下

<view class="page-body"><mapid="map"style="width:100%; height:{{Height}}px"scale='16'latitude="{{latitude}}"longitude="{{longitude}}"markers="{{markers}}"covers="{{covers}}"show-location></map><view class='cov_view'> <image src='../image/selectstar.png'  class='cov_image' bindtap='click'></image><image src='../image/img1.jpg' class='center_image'></image><image src='../image/3.png'  class='cov_image' bindtap='click'></image></view> </view>

.cov_view{display: flex;flex-direction: row;justify-content: space-between;height: 140rpx;position: fixed;bottom: 0;right: 0;left: 0;margin-bottom: 50rpx;
}
.cov_image{width: 100rpx;height: 100rpx;
}.center_image{width: 300rpx;height: 100rpx;
}

?

?

總結

以上是生活随笔為你收集整理的微信小程序cover-view 与cover-image的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。