微信小程序搜索框回车搜索事件

来源:csdn博客分类: 文章浏览史发布时间:2020-08-31 12:06:20 最后更新:2020-08-31 浏览:1092

转载声明：

本文为摘录自“csdn博客”，版权归原作者所有。

原文链接:

https://blog.csdn.net/Y__nice/article/details/80434257?...

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2020-08-31 12:06:20

这里写的是在微信小程序里的搜索框，按软键盘回车键触发搜索事件。

首先前台代码，这是整个搜索框代码

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

微信小程序搜索框 回车搜索事件

微信小程序搜索框回车搜索事件