価値の価値を得る
もともとは共通の効果に帰するつもりでしたが、とても印象的だったので、別に選びました。
ナンセンスな話をせず、直接コードに進んでください。
エフェクト画像
コード
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 () {
}
})
困っている方のお役に立てば幸いです
