相思资源网 Design By www.200059.com
先上代码：
wxml:
<!-- 顶部搜索框 -->
<view class="inputcontainer">
<view class="input" catchtap="inputSwitchStatus" wx:if="{{!edit}}">搜索商品</view>
<view class="edit" wx:else>
<form bindsubmit="inputSearch" bindreset="inputReset">
<text class="searchicon"></text>
<input focus="true" type="text" name="search-input" confirm-type='search' bindconfirm="inputSearch"/>
<button class="deleteicon cancel-btn-default-style" catchtap="inputReset" hover-class="clear-btn-hover" formType="reset"></button>
<button class="cancel cancel-btn-default-style" hover-class="search-btn-hover" formType="submit">搜索</button>
</form>
</view>
</view>
效果：
上面两张图片分别是搜索框的两种状态，非搜索状态和搜索状态，样式很简单，逻辑也不复杂，但是小程序的搜索和网页的不一样，网页可以直接添加点击事件但是，小程序不行，因为小程序的搜索和输入分开，如果使用data-的话无疑会产生很多多余的代码，庆幸的是小程序提供了form可以整合搜索和输入，具体和已参考官方API。
本文主要讲的是踩过的坑，
①搜索和重置必须使用按钮，因为要使用button的formType。
②搜索事件和重置事件是绑定到form上的，而不是button。
③input必须添加一个name属性，例如name=”search-input”，否则你是用e.detail.value是取不到值的
④confirm-type='search'是控制你的软键盘的右下角显示的文字
⑤到目前为止你的搜索按钮可以正常使用，但是点击的软键盘的搜索按钮，没有任何效果，如果想要软键盘的搜索按钮同样可以使用，首先在输入框中添加indconfirm=”inputSearch”事件，然后测试你会发现，现在依然无法使用，但是却使用了函数，这是因为当你使用软键盘进行搜索时，获取的值的方式是e.detail.value就可以而不是e.detail.value‘search-input',所以你需要修改一下你的搜索函数：
inputSearch: function (e) { //输入框根据查询条件搜索点击事件
// 获取用户输入框中的值
let inputVaue = e.detail.value['search-input'] "/product/index" + inputVaue + "&fromindex=true";
this.converterUrlAndRedirect(searchUrl);
}
注意：
let inputVaue = e.detail.value[‘search-input'] "color: #ff0000">总结
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无微信小程序实现搜索框功能及踩过的坑的评论...