微信小程式搜尋框 回車搜尋事件
阿新 • • 發佈:2019-01-30
這裡寫的是在微信小程式裡的搜尋框,按軟鍵盤迴車鍵觸發搜尋事件。
首先前臺程式碼,這是整個搜尋框程式碼
<view class="weui-search-bar"> <view class="weui-search-bar__form"> <view class="weui-search-bar__box"> <icon class="weui-icon-search_in-box" type="search" size="14"></icon> <input type="text" class="weui-search-bar__input" placeholder="搜尋" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindconfirm="onShow"
/> <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput"> <icon type="clear" size="14"></icon> </view> </view> <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput"> <icon class="weui-icon-search" type="search" size="14"></icon> <view class="weui-search-bar__text">搜尋</view> </label> </view> <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view> </view>
紅色部分 bindconfirm 即為回車事件,為它繫結上需要觸發的事件。onshow是我的搜尋方法。