@@ -109,7 +109,7 @@ Component({ | |||||
}, | }, | ||||
placeholder: { | placeholder: { | ||||
type: String, | type: String, | ||||
value: '搜索' | |||||
value: '请输入' | |||||
}, | }, | ||||
value: { | value: { | ||||
type: String, | type: String, | ||||
@@ -134,7 +134,8 @@ Component({ | |||||
}, | }, | ||||
data: { | data: { | ||||
result: [], | result: [], | ||||
navigationBarHeight | |||||
navigationBarHeight, | |||||
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物']] | |||||
}, | }, | ||||
lastSearch: Date.now(), | lastSearch: Date.now(), | ||||
lifetimes: { | lifetimes: { | ||||
@@ -147,6 +148,11 @@ Component({ | |||||
} | } | ||||
}, | }, | ||||
methods: { | methods: { | ||||
bindMultiPickerChange(e){ | |||||
this.setData({ | |||||
value: this.data.multiArray[0][e.detail.value[0]] + this.data.multiArray[1][e.detail.value[1]] | |||||
}) | |||||
}, | |||||
clearInput: function clearInput() { | clearInput: function clearInput() { | ||||
this.setData({ | this.setData({ | ||||
value: '' | value: '' | ||||
@@ -154,7 +160,9 @@ Component({ | |||||
this.triggerEvent('clear'); | this.triggerEvent('clear'); | ||||
}, | }, | ||||
inputFocus: function inputFocus(e) { | inputFocus: function inputFocus(e) { | ||||
this.triggerEvent('focus', e.detail); | |||||
debugger; | |||||
this.triggerEvent('focus', e.detail); | |||||
}, | }, | ||||
inputBlur: function inputBlur(e) { | inputBlur: function inputBlur(e) { | ||||
this.setData({ | this.setData({ | ||||
@@ -1,16 +1,21 @@ | |||||
<navbar home back text="门店搜素"></navbar> | <navbar home back text="门店搜素"></navbar> | ||||
<view class="weui-search-bar {{extClass}}" style="margin-top:{{navigationBarHeight}}rpx"> | <view class="weui-search-bar {{extClass}}" style="margin-top:{{navigationBarHeight}}rpx"> | ||||
<view class="weui-search-bar__form"> | <view class="weui-search-bar__form"> | ||||
<view class="weui-search-bar__box"> | |||||
<view class="weui-search-bar__box" style="position:relative;"> | |||||
<icon class="weui-icon-search_in-box" type="search" size="12"></icon> | <icon class="weui-icon-search_in-box" type="search" size="12"></icon> | ||||
<input type="text" class="weui-search-bar__input" placeholder="{{placeholder}}" value="{{value}}" focus="{{focus}}" bindblur="inputBlur" bindfocus="inputFocus" bindinput="inputChange" /> | |||||
<input type="text" class="weui-search-bar__input" placeholder="{{placeholder}}" value="{{value}}" bindblur="inputBlur" bindfocus="inputFocus" bindinput="inputChange" /> | |||||
<picker class="pickers" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> | |||||
<view class="picker"> | |||||
搜索 | |||||
</view> | |||||
</picker> | |||||
<view class="weui-icon-clear" wx:if="{{value.length > 0}}" bindtap="clearInput"> | <view class="weui-icon-clear" wx:if="{{value.length > 0}}" bindtap="clearInput"> | ||||
<icon type="clear" size="12"></icon> | <icon type="clear" size="12"></icon> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<label class="weui-search-bar__label" hidden="{{searchState}}" bindtap="showInput"> | <label class="weui-search-bar__label" hidden="{{searchState}}" bindtap="showInput"> | ||||
<icon class="weui-icon-search" type="search" size="12"></icon> | <icon class="weui-icon-search" type="search" size="12"></icon> | ||||
<view class="weui-search-bar__text">搜索</view> | |||||
<view class="weui-search-bar__text">请输入</view> | |||||
</label> | </label> | ||||
</view> | </view> | ||||
<view wx:if="{{cancel && searchState}}" class="weui-search-bar__cancel-btn" bindtap="hideInput">{{cancelText}}</view> | <view wx:if="{{cancel && searchState}}" class="weui-search-bar__cancel-btn" bindtap="hideInput">{{cancelText}}</view> | ||||
@@ -1,2 +1,13 @@ | |||||
@import "../../weui.wxss"; | @import "../../weui.wxss"; | ||||
.weui-search-bar{position:relative;padding:8px;display:flex;box-sizing:border-box;background-color:#EDEDED;-webkit-text-size-adjust:100%;align-items:center}.weui-icon-search{margin-right:8px;font-size:14px;vertical-align:top;margin-top:.64em;height:1em;line-height:1em}.weui-icon-search_in-box{position:absolute;left:12px;top:50%;margin-top:-8px}.weui-search-bar__text{display:inline-block;font-size:14px;vertical-align:top}.weui-search-bar__form{position:relative;flex:auto;border-radius:4px;background:#FFFFFF}.weui-search-bar__box{position:relative;padding-left:32px;padding-right:32px;width:100%;box-sizing:border-box;z-index:1}.weui-search-bar__input{height:32px;line-height:32px;font-size:14px;caret-color:#07C160}.weui-icon-clear{position:absolute;top:0;right:0;bottom:0;padding:0 12px;font-size:0}.weui-icon-clear:after{content:"";height:100%;vertical-align:middle;display:inline-block;width:0;overflow:hidden}.weui-search-bar__label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:4px;text-align:center;color:rgba(0,0,0,0.5);background:#FFFFFF;line-height:32px}.weui-search-bar__cancel-btn{margin-left:8px;line-height:32px;color:#576B95;white-space:nowrap} | |||||
.weui-search-bar{position:relative;padding:8px;display:flex;box-sizing:border-box;background-color:#EDEDED;-webkit-text-size-adjust:100%;align-items:center}.weui-icon-search{margin-right:8px;font-size:14px;vertical-align:top;margin-top:.64em;height:1em;line-height:1em}.weui-icon-search_in-box{position:absolute;left:12px;top:50%;margin-top:-8px}.weui-search-bar__text{display:inline-block;font-size:14px;vertical-align:top}.weui-search-bar__form{position:relative;flex:auto;border-radius:4px;background:#FFFFFF}.weui-search-bar__box{position:relative;padding-left:32px;padding-right:32px;width:100%;box-sizing:border-box;z-index:1}.weui-search-bar__input{height:32px;line-height:32px;font-size:14px;caret-color:#07C160}.weui-icon-clear{position:absolute;top:0;right:0;bottom:0;padding:0 12px;font-size:0}.weui-icon-clear:after{content:"";height:100%;vertical-align:middle;display:inline-block;width:0;overflow:hidden}.weui-search-bar__label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:4px;text-align:center;color:rgba(0,0,0,0.5);background:#FFFFFF;line-height:32px}.weui-search-bar__cancel-btn{margin-left:8px;line-height:32px;color:#576B95;white-space:nowrap} | |||||
.pickers{ | |||||
width:100%; | |||||
height: 64rpx; | |||||
position: absolute; | |||||
left: 0; | |||||
top: 0; | |||||
bottom: 0; | |||||
margin: auto; | |||||
color: transparent; | |||||
border: 1px solid #07C160; | |||||
} |