微信小程序开发(3)——搜索框一键清除

小程序的input输入可以获取到实时输入数据，一键删除功能需要借助input的value属性

1.搜索框的数据获取

要在<input>标签中设置bindinput='search'属性

<view class="search">
    <image src="../../images/icon-search.png"></image>
    <input type="number" maxlength="7" placeholder='搜索' bindinput='search' value="{{searchContent}}"/>
    <icon wx:if="{{clearShow}}" type="clear" size="14" bindtap='clear'/>
  </view>

data: {
    clearShow: false, // 动态显示清除图标
    searchContent: ''
},
search: function(e){
    let that = this;
    let value = e.detail.value;
    if (value.length > 0 && !that.data.clearShow){
      that.setData({
        clearShow: true
      })
    } else if (value.length == 0){
      that.setData({
        clearShow: false
      })
    }
},

2.一键清除搜索框内容

清除搜索框内容并隐藏清除按钮

clear: function(){
    this.setData({
      clearShow: false,
      searchContent: ''
    })
  }