微信小程序开发-地图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

原文地址：https://www.cnblogs.com/molimobai/p/12580288.html