微信小程序开发(3)——搜索框一键清除

小程序的input输入可以获取到实时输入数据，一键删除功能需要借助input的value属性

1.搜索框的数据获取

要在<input>标签中设置bindinput='search'属性

<view class="search"><image src="../../images/icon-search.png"></image><input type="number" maxlength="7" placeholder='搜索' bindinput='search' value="{{searchContent}}"/><icon wx:if="{{clearShow}}" type="clear" size="14" bindtap='clear'/></view>

data: {clearShow: false, // 动态显示清除图标searchContent: ''
},
search: function(e){let that = this;let value = e.detail.value;if (value.length > 0 && !that.data.clearShow){that.setData({clearShow: true})} else if (value.length == 0){that.setData({clearShow: false})}
},

2.一键清除搜索框内容

清除搜索框内容并隐藏清除按钮

clear: function(){this.setData({clearShow: false,searchContent: ''})}

微信小程序开发(3)——搜索框一键清除相关推荐

微信小程序开发实现搜索功能
对于搜索都是会有一些需要的,所以搜索页面还是可以复用的.主页面就是下面这样: 这个页面在pages/components/component2/component2.wxml 点击页面中黄色的inp ...
微信小程序 - 商城项目 - 搜索框组件
搜索框组件引入自定义的搜索框组件引入扩展组件需要对搜索框组件实现一个粘性布局功能,引入官方的扩展组件 npm 安装扩展组件引入扩展组件构建 npm 实现粘性布局(在iphone5上可以实现, ...
微信小程序头部自定义搜索框斗鱼等
效果图代码 app.js App({onLaunch: function (res) {// 自定义标题栏测试const that = this;// 获取系统信息const systemInfo ...
微信小程序开发完工+问题汇总
前言经过将近一个多月的开发,我们团队开发的微信小程序 "出发吧一起" 终于开发完成,现在的线上版本为 2.2.4-beta 版本文档主要介绍该小程序在开发中所用到的技术,已经在 ...
微信小程序开发之『侧边栏滑动』特效
周末找事做做.看到微信里有个漂流瓶.试着敲了敲. 这里是用leancloud做后台.涉及到语音和文字的储存,查询.自己不会写后台代码,对于我算是个福利. 欢迎交流! 技术点: 1.微信小程序开发之录音 ...
微信小程序开发问题汇总 1
前言经过将近一个多月的开发,我们团队开发的微信小程序 "出发吧一起" 终于开发完成,现在的线上版本为 2.2.4-beta 版本文档主要介绍该小程序在开发中所用到的技术,已经在 ...
一键搭建微信小程序开发环境及demo运行（腾讯云上一键搭建node.js服务器环境，PHP，Java，.NET服务类似）
一.首先准备下本地环境(本地就需要一个微信开发工具) 1.首先得有一个微信小程序账号,登陆微信小程序首页:mp.weixin.qq.com,点击右上角立即注册. 注册登陆后,首页填写一些小程序基本信息 ...
uniapp微信小程序开发如何解决input框或者（textarea）框输入时界面被顶起，输入法遮盖输入框的问题？
最近在写微信小程序开发,客服吐槽,点击输入时界面总是被顶起来,输入框也被遮挡了一半,以下是解决方案. 首先将输入框设置为不向上顶页面的参数如下输入框参数 :adjust-position=" ...
微信小程序开发-IP地址查询-例子
微信小程序开发小程序搜索框 IP地址查询搜索查询样例微信小程序开发参考 https://mp.weixin.qq.com/debug/wxadoc/dev/component/ ...

微信小程序开发(3)——搜索框一键清除

1.搜索框的数据获取

2.一键清除搜索框内容

微信小程序开发(3)——搜索框一键清除相关推荐

最新文章

热门文章