「小程序」map组件层级之上实现cover-input

前言

现在是2019年1月初,小程序官方还没有发布cover-input等组件,在map层级之上可操作的组件只有cover-viewcover-image

正文

map组件属于原生组件,层级最高,能在map层级之上可操作的组件只有cover-viewcover-image,现有需求在map组件上层浮现弹框,可输入(input)

在真机上原生input组件嵌在<cover-view />内会被忽略导致

实现思路:

  • input用来输入内容,在真机上input组件嵌在<cover-view />内虽然会被忽略,但是点击依旧可以获取焦点;
  • 用一个cover-view显示输入的内容,显示内容的cover-view覆盖在input标签上,使视觉上做到cover-input效果;
  • 控制input的焦点可以在真机上做到cover-input效果,在input失去焦点后赋值给显示内容的cover-view;

核心代码:

           <!-- cover-input伪代码实现 -->
            <cover-view class='cover-input' bindtap='tapInput'>
                <cover-view class='text'>{{inputInfo}}</cover-view>
                <input class='input' value='{{inputModel}}' focus='{{inputFocus}}' bindblur='blurInput'></input>
            </cover-view>
            <!-- cover-input伪代码实现 -->
.cover-input{
  width: 80%;
  height: 32px;
  line-height: 32px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.9);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 15rpx;
  padding-right: 15rpx;
}
.text{
  height: 32px;
  line-height: 32px;
}
.input{
  height: 32px;
  line-height: 32px;
  /* margin-top为text的高度,保持视觉上一致 */
  margin-top: -32px; 
}
    /**
     * 将焦点给到 input(在真机上不能获取input焦点)
     */
    tapInput() {
        this.setData({
            //在真机上将焦点给input
            inputFocus:true,
            //初始占位清空
            inputInfo: ''
        });
    },

    /**
     * input 失去焦点后将 input 的输入内容给到cover-view
     */
    blurInput(e) {
        this.setData({
            inputInfo: e.detail.value || '输入'
        });
    }

效果图:
初始化状态:

真机初始化效果图

输入后:


真机输入后效果图
备注

源码请点:
cover-input源码

系列文章:
「小程序」map组件层级之上实现cover-select
「小程序」map组件层级之上实现cover-process-control
【敬请期待】

推荐阅读更多精彩内容