封了一个输入框的组件，大概的逻辑是：
1.输入框监听input事件，confirm事件，当数据发生变化时，反馈给外界2.要带上一个删除图标的样式不是很麻烦，就直接吧代码贴上来
view class='component' view class='inputbox' image class='image' src="../../assets/common/ic_search.png" /image input class='input' bindinput='hginput' bindconfirm='hgconfirm' type='text' placeholder='{{placeholder}}' type='{{type}}' value='{{value}}' confirm-type='搜索' / icon wx:if='{{value}}' bindtap="clearValue" class="icon" type='clear' size="16"/icon /view/viewlet that;Component({ properties: { // 初始化的输入框的值 value: { type: String, value: '', observer(new_value, old_value) { this.data.value = new_value; this.triggerEvent("hgchange", this.data.value); } }, placeholder: { type: String, value: '请输入搜索内容' }, //类型，默认为text type: { type: String, value: "text" } }, ready() { that = this; }, methods: { // input事件 hginput: function(data) { this.setData({ value: data.detail.value }); }, // commit事件 hgconfirm: function(data) { this.triggerEvent("hgconfirm", this.data.value); }, clearValue: function() { this.setData({ value: '' }) this.triggerEvent("hgchange", ''); } }})样式
.component { background-color: #fff; width: 750rpx; padding-top: 20rpx; padding-bottom: 20rpx;}.inputbox { box-sizing: border-box; margin-left: 25rpx; border: 1px solid #ccc; width: 700rpx; border-radius: 16rpx; height: 70rpx; background: rgba(248, 248, 248, 1);}.image { vertical-align: middle; display: inline-block; margin-top: 0rpx; margin-left: 20rpx; width: 50rpx; height: 50rpx;}.input { vertical-align: middle; width: 500rpx; margin-left: 10px; display: inline-block; height: 60rpx; margin-top: 5rpx; font-size: 24rpx;}.icon { position: absolute; display: block; top: 34rpx; right: 40rpx; opacity: 0.8; cursor: pointer;}怎么使用就不多说了，界面大概这样
老规矩，代码地址:
git仓库https://github.com/hushilin01/public_mk_miniprogram
