| 微信小程序自定义搜索框（searchbar） | 您所在的位置：网站首页 › 怎么删除微信小程序搜索功能 › 微信小程序自定义搜索框（searchbar） |
微信小程序自定义搜索框（searchbar）
|
微信小程序自定义搜索框（searchbar）
样式截图展示： 功能描述：微信小程序页面需要加入搜索框时，可以直接引用到页面中使用，当用户未输入任何关键字时如第一张图所示，当用户输入要搜索的关键字时如第二张图所示，出现取消文案和清空的icon标识，点击取消文案或者清空的icon标识，都可清空关键字，样式恢复到第一张图所示 实现代码： (1) searchbar.js Component({ properties: { placeholder: { type: String, value: '', } }, data: { inputValue: '' }, methods: { // 用户输入触发 handleInput: function(e) { this.setData({ inputValue: e.detail.value }) }, // 点击清空输入框icon handleDeleteClick: function() { this.setData({ inputValue: '' }) }, // 点击取消触发 handleTextbtnClick() { // 触发父组件中的方法 this.setData({ inputValue: '' }) }, // 用户点击确定触发 handleConfirm() { this.triggerEvent('handleSearch', this.data.inputValue) } } })(2) searchbar.json { "component": true }(3) searchbar.wxml |
【本文地址】
公司简介
联系我们