本来吧打算归于常见效果，但是发现这个对我印象很深刻，就单独挑出来
废话不多说直接上代码
wxml
<view class="main"> <view> <input maxlength="7" type="text" bindinput='btnValue' placeholder="请输入内容" value="{{inputvalue}}" /></view> <view> <image wx:if="{{inputCount}}" class="inputimg" bindtap="btnclear" src="../../img/icon/login/icon_close_orange.png"></image></view></view>wxss
.inputimg{ width: 60rpx; height: 60rpx;}.main{ display: flex; justify-content: space-around;}js
Page({ /** * 页面的初始数据 */ data: { inputvalue:'',//默认值为空 inputCount:false,//这个是图标默认不显示 }, // 这个是清空输入框的样式 btnclear(){ this.setData({ inputvalue:'', inputCount: false, }) }, // 这个是获取搜索框的值让图标显示 btnValue(e){ let value=e.detail.value if(value.length>0){ this.setData({ inputCount:true, }) } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }})希望可以帮助到正在烦恼当中的你啊