微信小程序开发-地图map组件上使用input组件
微信小程序开发-地图map组件上使用input组件
原生组件层级关系
微信小程序在最高层级
- 在微信小程序中原生组件包括
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
相关推荐
huha 2020-10-16
TLROJE 2020-10-26
echoes 2020-08-20
nercon 2020-08-01
zhanghaibing00 2020-06-28
Aveiox 2020-06-25
henryzhihua 2020-06-21
zhoutaifeng 2020-06-17
liangzhouqu 2020-06-16
TONIYH 2020-06-11
开心就好 2020-06-10
x青年欢乐多 2020-06-06
KyrieHe 2020-06-03
bertzhang 2020-06-02
haokele 2020-05-29
niehanmin 2020-05-28
davidliu00 2020-05-26