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

来源:csdn博客 分类: 文章浏览史 发布时间:2020-08-31 12:06:20 最后更新:2020-08-31 浏览:207
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
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是我的搜索方法。

 

 

 

 

 

 

php技术微信