<view class="search_row">
<input type="text" model:value="{{inputValue}}" placeholder="请输入商品关键字" bindinput="handleInput"/>
<button hidden="{{!isFocus}}">取消</button>
</view>
<view class="search_content"></view>
// pages/search/index.js
Page({
/**
* 页面的初始数据
*/
data: {
inputValue:"",//输入框的值
isFocus:false //取消按钮 是否显示
},
//处理input事件
handleInput(e){
const {value}=e.detail;
console.log(value);
if(!value.trim()){
this.setData({
isFocus:false
})
return;
}
this.setData({
isFocus:true
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
page{
background-color:
padding-top: 20rpx;
}
.search_row{
height: 50rpx;
display: flex;
input{
background-color:
flex: 1;
height: 100%;
padding-left: 30rpx;
}
button{
display: flex;
justify-content: center;
align-items: center;
width: 110rpx !important;
font-style: 26rpx;
padding: 0;
margin: 0 10rpx;
height: 100%;
}
}
.search_content{
}