E企盈营销工具技术服务商 热线:4006-838-530

微信小程序搜索,微信小程序搜索框组件之SearchBar

E企盈直播平台营销卖货系统

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;}

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序搜索,微信小程序搜索框组件之SearchBar
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏