小程序的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: ''
})
}