微信小程序開發-地圖map組件上使用input組件

標簽： 微信小程序 uni-app

---

原生組件層級關系

微信小程序在最高層級

• 在微信小程序中原生組件包括camera canvas input（僅在focus時表現為原生組件） live-player live-pusher map textarea video
• 在微信小程序開發中原生組件的層級是最高的，所以頁面中的其他組件無論設置 z-index 為多少，都無法蓋在原生組件上。
  后插入的原生組件可以覆蓋之前的原生組件。
• 原生組件還無法在 picker-view 中使用。
  基礎庫 2.4.4 以下版本，原生組件不支持在 scroll-view、swiper、movable-view 中使用。
• 同層渲染：同層渲染是為了解決原生組件的層級問題，在支持同層渲染后，原生組件與其它組件可以隨意疊加,目前支持原生組件同層渲染有 video, map, live-player, live-pusher, canvas(2d) 組件已支持同層渲染。
• 除開同層渲染外還可以使用 cover-view 和 cover-image 組件，可以覆蓋在部分原生組件上面。

微信小程序在地圖map上使用input等最高層級標簽 （uni-app框架中開發） 原生微信小程序也大致相同

在微信小程序真機下，map中使用input無法在map上顯示，所以可以通過在頁面中嵌套一個input標簽和一個cover-view文本進行隱藏顯示，通過點擊cover-view層級的自定義方法進行input的聚焦，輸入完成后將輸入的值賦值到 cover-view文本框中，隱藏input組件。

template中

<cover-view class='main_search' @tap='tapInput'>
    <cover-view class='main_search_input' :hidden="inputFocus">{{inputInfo}}</cover-view> <input class='main_search_input' :hidden="!inputFocus" :value='inputModel' :focus='inputFocus' @blur='blurInput'></input> </cover-view> 

script中

data() {
    return {
        inputFocus: false, // input 框的focus狀態
        inputModel: '', // input 框的輸入內容
        inputInfo: '請輸入搜索地址', // cover-view 顯示的 input 的輸入內容,初始值充當placeholder作用
    };
},
// 將焦點給到 input（在真機上不能獲取input焦點）
 tapInput() {
 this.inputFocus = true;
 //初始占位清空
 if(this.inputInfo=='請輸入搜索地址'){
 this.inputInfo = '';
 }
 },
// input 失去焦點后將 input 的輸入內容給到cover-view
 blurInput(e) {
 console.log(e.detail.value);
 this.inputInfo = e.detail.value || '請輸入搜索地址';
 this.inputFocus = false;
 }
 

cover-view標簽 Bug & Tip

參考地址：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

• cover-view和cover-image的aria-role僅可設置為button，讀屏模式下才可以點擊，並朗讀出“按鈕”；為空時可以聚焦，但不可點擊
• 最外層 cover-view 支持 position: fixed
• 微信小程序基礎庫 1.9.0 起支持插在 view 等標簽下。在此之前只可嵌套在原生組件map、video、canvas、camera內，避免嵌套在其他組件內。
• 微信小程序基礎庫 1.6.0 起支持css transition動畫，transition-property只支持transform (translateX, translateY)與opacity。
• 微信小程序基礎庫 1.6.0 起支持css opacity。
• 事件模型遵循冒泡模型，但不會冒泡到原生組件。
• 文本建議都套上cover-view標簽，避免排版錯誤。
• 只支持基本的定位、布局、文本樣式。不支持設置單邊的border、background-image、shadow、overflow: visible等。
• 支持使用 z-index 控制層級
• 默認設置的樣式有：white-space: nowrap; line-height: 1.2; display: block;
• 自定義組件嵌套 cover-view 時，自定義組件的 slot 及其父節點暫不支持通過 wx:if 控制顯隱，否則會導致 cover-view 不顯示

記錄詳情

• 記錄開始時間：2020-03-17 11:00
• 記錄結束時間:2020-03-17 11:32
• 記錄作者：墨里墨白
• 記錄次數：1
• 更新時間：2020-03-17 11:32