最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
微信小程序如何实现搜索框功能 微信小程序实现搜索框功能代码示例
时间:2020-06-19 编辑:袖梨 来源:一聚教程网
微信小程序如何实现搜索框功能?本篇文章小编给大家分享一下微信小程序实现搜索框功能代码示例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
先上代码:
wxml:
搜索商品
效果:
上面两张图片分别是搜索框的两种状态,非搜索状态和搜索状态,样式很简单,逻辑也不复杂,但是小程序的搜索和网页的不一样,网页可以直接添加点击事件但是,小程序不行,因为小程序的搜索和输入分开,如果使用data-的话无疑会产生很多多余的代码,庆幸的是小程序提供了form可以整合搜索和输入。
①搜索和重置必须使用按钮,因为要使用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;代替它
-
下一个: 微信小程序返回上一级页面的实现代码示例
相关文章
- SpringBoot自定义bean绑定解析 10-24
- Javaweb工程运行报错HTTP Status 404解决教程 10-20
- JAVA获取jvm和操作系统相关信息方法 10-20
- BeanFactory和FactoryBean的区别讲解 10-20
- 微信小程序的宿主环境实现教程 10-10
- dispatchEvent解决重叠元素响应事件教程 10-10