搜索功能
一 简单搜索功能实现
wxml部分:
<viewclass="search">
<viewclass="df search_arr">
<iconclass="searchcion"size='20'type='search'></icon>
<!-- 搜索框 -->
<inputclass="disabled"placeholder="请输入关键字"value="{{searchValue}}" bindinput='inputBind'/></view>
</view>
<viewclass='sousuo'>搜索</view>
wxss部分:
.search {
width:80%;
margin-top:20rpx;
margin-bottom:20rpx;
}
.search_arr {
border:1pxsolid#d0d0d0;
border-radius:10rpx;
margin-left:20rpx;
}
.search_arrinput {
margin-left:60rpx;
height:60rpx;
border-radius:5px;
}
.bc_text {
line-height:68rpx;
height:68rpx;
margin-top:34rpx;
}
.sousuo {
margin-top:20rpx;
margin-left:15rpx;
width:15%;
line-height:150%;
text-align:center;
border:1pxsolid#d0d0d0;
border-radius:10rpx;
margin-bottom:20rpx;
}
.page_row {
display:flex;
flex-direction:row;
}
.searchcion {
margin:10rpx10rpx10rpx10rpx;
position:absolute;
left:25rpx;
z-index:2;
width:20px;
height:20px;
text-align:center;
}
js部分:
data: {
searchValue: '',//搜索的内容
}
// 搜索功能
inputBind: function (event){
//显示输入的文本
this.setData({
searchValue: event.detail.value
})
//console.log('bindInput' + this.data.searchValue);
},