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

 更新时间:2020年06月19日 11:27:00   作者:babulongbo  
这篇文章主要介绍了微信小程序实现搜索框功能及踩过的坑,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

先上代码:

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;代替它

总结

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

相关文章

  • Object.keys() 和 Object.getOwnPropertyNames() 的区别详解

    Object.keys() 和 Object.getOwnPropertyNames() 的区别详解

    这篇文章主要介绍了Object.keys() 和 Object.getOwnPropertyNames() 的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JS获取当前日期和时间的简单实例

    JS获取当前日期和时间的简单实例

    这篇文章主要介绍了JS获取当前日期和时间的简单实例,有需要的朋友可以参考一下
    2013-11-11
  • 详解JavaScript中Hash Map映射结构的实现

    详解JavaScript中Hash Map映射结构的实现

    Hash Map通常在JavaScript中作为一个简单的来存储键值对的地方,不过哈希对象Object并不是一个真正的哈希映射,没Java中的Hash Map来的那么强大,well,接下来带大家详解JavaScript中Hash Map映射结构的实现
    2016-05-05
  • 一些超实用的JS常用算法详解(推荐!)

    一些超实用的JS常用算法详解(推荐!)

    算法是计算机算法即计算机能够执行的算法,只有明确了算法后,才能使应用程序实现某些功能,所以通常人们会将算法称为程序的灵魂,下面这篇文章主要给大家分享介绍了一些超实用的JS常用算法的相关资料,需要的朋友可以参考下
    2022-10-10
  • JS操作Cookie写入和读取实例代码

    JS操作Cookie写入和读取实例代码

    JS操作Cookie,包含了写入和读取及读取value的值,适合新手朋友,感兴趣的朋友可以参考下
    2013-10-10
  • BootStrap+Mybatis框架下实现表单提交数据重复验证

    BootStrap+Mybatis框架下实现表单提交数据重复验证

    这篇文章主要介绍了BootStrap+Mybatis框架下实现表单提交数据重复验证功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • Javascript读取json文件方法实例总结

    Javascript读取json文件方法实例总结

    json文件是一种轻量级的数据交互格式,下面这篇文章主要给大家介绍了关于Javascript读取json文件方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 微信小程序之购物车功能

    微信小程序之购物车功能

    这篇文章主要为大家详细介绍了微信小程序之购物车功能的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 一篇文章看懂JavaScript中的回调

    一篇文章看懂JavaScript中的回调

    这篇文章主要给大家介绍了如何通过一篇文章看懂JavaScript中的回调,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • ie8本地图片上传预览示例代码

    ie8本地图片上传预览示例代码

    ie8本地图片上传预览出现问题是因为限制浏览器造访本地文件,所以用到滤镜和div,下面有个不错的示例,希望对大家有所帮助
    2014-01-01

最新评论