微信小程序开发-地图map组件上使用input组件

Posted 2020-11-27 molimobai

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序开发-地图map组件上使用input组件相关的知识，希望对你有一定的参考价值。

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