1. 程式人生 > >微信小程式搜尋框 回車搜尋事件

微信小程式搜尋框 回車搜尋事件

這裡寫的是在微信小程式裡的搜尋框,按軟鍵盤迴車鍵觸發搜尋事件。

首先前臺程式碼,這是整個搜尋框程式碼

<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是我的搜尋方法。