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


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(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 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往windows中添加用户
2006/12/06 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python中文件操作简明介绍
2015/04/13 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python发展简史 Python来历
2019/05/14 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
介绍一下SQL Server的全文索引
2013/08/15 面试题
介绍一下EJB的体系结构
2012/08/01 面试题
家长给孩子的表扬信
2014/01/17 职场文书
情人节活动策划方案
2014/02/27 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
招商银行收入证明
2015/06/17 职场文书