小程序input框有值时显示清空按钮

您好，针对您的问题，可以通过监听 input 框的输入事件，在输入框中有值时，动态添加一个清空按钮。具体实现代码如下：

<!-- 输入框 -->
<input id="input" type="text" bindinput="onInput" />

<!-- 清空按钮 -->
<button id="clearBtn" wx:if="{{showClearBtn}}" bindtap="onClear">清空</button>

<script>
  Page({
    data: {
      showClearBtn: false
    },

    onInput: function(e) {
      if (e.detail.value !== "") {
        this.setData({ showClearBtn: true });
      } else {
        this.setData({ showClearBtn: false });
      }
    },

    onClear: function() {
      this.setData({ showClearBtn: false });
      var input = this.selectComponent("#input");
      input.clear();
    }
  });
</script>

以上代码中，通过 bindinput 事件监听 input 框的输入事件，当输入框中有值时，显示清空按钮。在点击清空按钮时，先隐藏清空按钮，然后通过 selectComponent 方法获取到输入框组件，再调用 clear 方法清空输入框的值。