注： 该组件的定位可以自己写，我这里的直接
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); } } })triggerEvent触发事件，自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项
参考：组件间通信与事件
引用：
json文件中
"usingComponents": { "search-input": "/components/searchinput/searchinput" }wxml中
<search-input class="search" value="{{keyword}}" clearable="{{true}}" bindinput="handleinput"></search-input>
