index.wxml
!--组件模板--viewslot/slotviewclass='tit_seabox'viewicontype='search'size="32rpx"/iconinputtype="text"bindinput="searchList"bindconfirm="endsearchList"bindfocus='getfocus'bindblur="blursearch"confirm-type='search'value='{{searchstr}}'placeholder='请输入...'/iconbindtap='activity_clear'wx:if="{{searchflag}}"type='clear'size="28rpx"/icon/viewviewwx:if="{{searchflag}}"bindtap='cancelsearch'取消/viewviewclass='activity_add'wx:if="{{addflag}}"imagebindtap='addhandle'src='{{addimg}}'/image/view/view/viewindex.js
//本组件为搜索组件//需要传入addflag值为true/false（搜索框右侧部分）//若显示搜索框右侧部分需传入右侧图标url以及addhandle函数Component({properties:{addflag:{//显示搜索框右侧部分type:Boolean,value:false,observer(newVal,oldVal,changedPath){}},addimg:{//显示搜索框右侧部分icontype:String,value:''},searchstr:{//input值type:String,value:'值'},searchflag:{type:Boolean,value:false,}},/组件的初始数据/data:{},/组件的方法列表/methods:{//获得焦点getfocus(){this.setData({searchflag:true,})},//搜索框右侧按钮事件addhandle(){this.triggerEvent("addhandle");},//搜索输入searchList(e){this.triggerEvent("searchList",e);},//查询endsearchList(e){this.triggerEvent("endsearchList");},//失去焦点blursearch(){//console.log('失去焦点')},//取消cancelsearch(){this.setData({searchflag:false,})this.triggerEvent("cancelsearch");},//清空搜索框activity_clear(e){this.triggerEvent("activity_clear");},}})index.wxss
.tit_seabox{width:calc(100%-64rpx);background:#e5e5e5;height:60rpx;padding:20rpx32rpx;display:flex;align-items:center;overflow:hidden;}.tit_seabox_bar{width:calc(100%-32rpx);height:60rpx;display:flex;align-items:center;border-radius:13rpx;background:#ffffff;padding-left:32rpx;}/有权限添加活动/.tit_seabox_bar.tit_seabox_add{width:calc(100%-122rpx);}/开始搜索时/.tit_seabox_bar.tit_start_search{width:calc(100%-102rpx);}/开始搜索且有权限添加/.tit_seabox_bar.tit_start_search.tit_seabox_add{width:calc(100%-192rpx);}.tit_seabox_baricon{margin-right:20rpx;}.tit_seaboxinput{height:60rpx;line-height:60rpx;font-size:28rpx;width:100%;margin-right:32rpx;}.activity_add{width:60rpx;text-align:right;border-left:4rpxsolid#f2f2f2;margin-left:20rpx;}.activity_addimage{width:40rpx;height:40rpx;}.activity_seabtn{font-size:28rpx;width:70rpx;text-align:right;}