搜索框是再常见不过的组件了。但是有些细节，不知道大家注意到了吗？

请大家体验一下以下几个搜索组件吧，进行简单的操作：输入内容，然后清空，再输入内容。
1、微信app原生搜索
2、美团外卖小程序中的搜索
3、贝壳找房小程序中的搜索

在输入内容之后，点击清除图标进行清空内容，
微信原生搜索的软键盘是一直显示的，一直保持聚焦状态。
美团小程序中是先失焦，软键盘收起，然后再自动聚焦，弹出软键盘。
而贝壳找房小程序在清空输入内容后就完全失焦，收起软键盘了。

这三种交互方式，显而易见是微信原生的最友好。
因为我们在进行清除内容的操作之后，大概率会再进行重新输入。
如果直接给失焦，收起软键盘，用户再次输入，还要多一次点击聚焦，显然不友好。
而软键盘收起再自动弹出的迂回方式，是可以接受的。
那么能不能在微信小程序中达到微信app原生搜索一样的体验呢？是可以的。
请体验微盟小程序组件库中的搜索组件(文章末尾有入口)

实现的关键点：
1、catch:touchstart替换bind:tap
2、清除按钮在touchstart之后立即隐藏（这点正好符合交互习惯，即内容为空的时候不显示清空按钮）

以下是代码部分：代码片段

// wxml
<view class="search">
    <input placeholder="搜索框" value="{{value}}" type="text" bindinput="bindKeyInput"/>
    <span class="btn" wx:if="{{ showClear }}" catch:touchstart="clear">清除</span>
</view>

// js
const app = getApp()

Page({
    data: {
        value: '',
        showClear: false
    },
    bindKeyInput(e) {
        this.setData({ value: e.detail.value, showClear: e.detail.value.length > 0})
    },
    clear() {
        this.setData({ value: '',  showClear: false})
    }
}

// wxss
.search {
    border: 1px solid red;
    display: flex;
    align-items: center;
}
input {
    flex: 1;
}
.btn {
   background-color: aqua;
}

微盟移动端组件库官网：http://titian.design.weimob.com
组件库示例小程序码：