微信小程序实现搜索框功能及踩过的坑


Posted in Javascript onJune 19, 2020

先上代码:

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'] ? e.detail.value['search-input'] : e.detail.value;
 if (!inputVaue) {
  throw new Error('search input contents con not empty!');
  return ;
 }
 let searchUrl = "/product/index?keyword=" + inputVaue + "&fromindex=true";
 this.converterUrlAndRedirect(searchUrl);
 }

注意:

let inputVaue = e.detail.value[‘search-input'] ? e.detail.value[‘search-input'] : e.detail.value;
,现在你的小程序搜索框可以使用了。

另外有一个布局问题,ios的小程序对position: fixed;很不友好,所有尽量使用position: absolute;代替它

总结

到此这篇关于微信小程序实现搜索框功能及踩过的坑的文章就介绍到这了,更多相关微信小程序实现搜索框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 #Javascript
小程序中的箭头函数的具体使用
Jun 19 #Javascript
在VUE style中使用data中的变量的方法
Jun 19 #Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 #Javascript
原生JS实现微信通讯录
Jun 18 #Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 #Javascript
js实现ajax的用户简单登入功能
Jun 18 #Javascript
You might like
简单的PHP图片上传程序
2008/03/27 PHP
php adodb连接不同数据库
2009/03/19 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
python抓取网页内容示例分享
2014/02/24 Python
Python中属性和描述符的正确使用
2016/08/23 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
英文自我鉴定
2013/12/10 职场文书
20年同学聚会感言
2014/02/03 职场文书
保险公司晨会主持词
2014/03/22 职场文书
图书馆标语
2014/06/19 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
妈妈别哭观后感
2015/06/08 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
SQL Server中的游标介绍
2022/05/20 SQL Server