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

sucheng 2020-03-27

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

相关推荐