注: 该组件的定位可以自己写,我这里的直接
position: fixed;
left:0;
top:0;
right:0;
z-index: 10;
background:#fff;
一、页面
<view class="customer-search">
<view class="search-entry">
<image class="search-icon" src="/images/search@2x.png"></image>
<input class="search-input" value="{{keyword}}" confirm-type="{{confirmType}}" placeholder="{{placeholder}}" bindinput="handleInput"></input>
<view class="icon-wrapper" wx:if="{{clearable}}">
<icon class="search-clear" class="icon-small" color="#999" type="cancel" size="23" wx:if="{{keyword}}" bindtap="handleClearTap"></icon>
</view>
</view>
<text class="cancel">取消</text>
</view>
二、WXSS
.customer-search{
display: flex;
align-items: center;
padding: 25rpx;
}
.search-entry{
display: flex;
flex: auto;
margin-right: 26rpx;
}
.search-entry .search-icon{
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
.search-entry{
padding: 24rpx 32rpx;
box-sizing: border-box;
border: 1px solid #007AFF;
border-radius: 48rpx;
}
.search-entry .search-input{
width: 85%;
margin-right: 15rpx;
}
.icon-wrapper{
width: 23px;
height: 23px;
}
三、JS
// components/searchInput/searchInput.js
Component({
behaviors: ['wx://form-field'],
/**
* 组件的属性列表
*/
properties: {
placeholder: {
type: String,
value: '请输入'
},
confirmType: {
type: String,
value: 'search'
},
disabled: {
type: Boolean,
value: false
},
keyword: {
type: String,
value: ''
},
clearable: {
type: Boolean,
value: true
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
handleInput(e){
// console.log(e)
let detail = {
keyword: e.detail.value
}
this.setData({
keyword: detail.keyword
})
this.triggerEvent('input', detail)
},
handleClearTap(){
let detail = {
keyword: ''
}
this.setData({
keyword: ''
})
this.triggerEvent('clear', detail);
}
}
})
tips: 这里说一下triggerEvent的用法
triggerEvent触发事件,自定义组件触发事件时,需要使用
triggerEvent
方法,指定事件名、detail对象和事件选项
参考:组件间通信与事件
引用:
json文件中
"usingComponents": {
"search-input": "/components/searchinput/searchinput"
}
wxml中
<search-input class="search" value="{{keyword}}" clearable="{{true}}" bindinput="handleinput"></search-input>