从0开发豆果美食小程序_搜索组件

来源：未知浏览 156次时间 2021-06-09 08:33

效果图

从0开发豆果美食小程序_搜索组件

<view class='container'> <view class='input-wrapper'> <image class='search-icon' src='/img/search.png'></image> <input placeholder='{{placeholder}}' value='{{inputValue}}' bindinput='handleInput' bindconfirm='handleSearch' bindfocus='inputFocused'> </input> <view class='close-icon-wrapper' wx:if="{{showCloseIcon}}" bindtap='clearValue'> <image class='close-icon' src='/img/close.png' ></image> </view> <text bindtap='onTap'>搜索</text> </view> </view> 组件样式

container：高度 100 rpx背景色 #eee云南网站优化背景色 #eeeflex 布局。

从0开发豆果美食小程序_搜索组件

search-icon：宽高 32 rpx。

input：字体和光标颜色 #000字体大小 32 rpx。

close-icon-wrapper：宽高 80 rpx绝对定位。

text：搜索按钮宽 110 rpx高 65 rpx绝对定位左边框 2rpx solid #eee。

.container { background: #eee; height: 100rpx; width: 100%; display: flex; justify-content: center; align-items: center; } .input-wrapper { display: flex; align-items: center; height: 80rpx; width: 80%; background: #fff; border-radius: 20rpx; } .input-wrapper .search-icon { margin-left: 20rpx; width: 32rpx; height: 32rpx; } .input-wrapper input { margin-left: 10rpx; color: #000; font-size: 32rpx; caret-color: #000; width: 60%; } .input-wrapper .close-icon-wrapper{ position: absolute; left: 480rpx; width: 80rpx; height: 80rpx; background:#fff; display: flex; justify-content: center; align-items: center; } .input-wrapper .close-icon { width: 42rpx; height: 42rpx; } .input-wrapper text { position: absolute; right: 80rpx; width: 110rpx; height: 65rpx; padding: 0; background: #fff; display: flex; justify-content: center; align-items: center; font-size: 32rpx; border-left: 2rpx solid #eee; } 组件功能 1. 属性区分

组件的构造器中要注意区分 properties 和 dataproperties 中写组件的对外属性data 写组件的对内属性。在本搜索组件中 placeholder 和 value 从页面传来所以它们写在 properties 中控制清除按钮是否出现的 showCloseIcon 要写在 data 中。

properties: { placeholder: { type: String, value: '搜索' // 如果页面不传placeholder显示“搜索” }, inputValue: { type: String } }, data: { showCloseIcon: false, }, 2.方法设置事件流程

（1）光标不聚焦没有任何输入——显示搜索图标、placeholder和搜索按钮。

（2）光标聚焦没有任何输入——光标闪烁显示搜索图标、placeholder和搜索按钮。

（3）光标聚焦有输入——光标闪烁显示搜索图标、输入文字、清除按钮和搜索按钮。

（4）光标不聚焦有输入——显示搜索图标、输入文字、清除按钮和搜索按钮。

（5）按回车搜索——清除按钮隐藏。

（6）点击搜索按钮——清除按钮隐藏。

由此可见云南网站优化有输入——显示搜索图标、输入文字、清除按钮和搜索按钮。

（5）按回车搜索——清除按钮隐藏。

（6）点击搜索按钮——清除按钮隐藏。

由此可见需要 input 组件的聚焦和键盘输入事件。

inputFocused：如果聚焦时输入框中有内容显示 closeIcon；

handleInput：如果输入时没有内容不显示 closeIcon有内容显示 closeIcon 并把值存入 value。

handleSearch：点击回车后云南网站优化显示 closeIcon 并把值存入 value。

handleSearch：点击回车后不显示 closeIcon。

inputFocused(e) { if (e.detail.value !== '') { this.setData({ showCloseIcon: true, }); } }, handleInput(e) { if (e.detail.value == '') { this.setData({ showCloseIcon: false, }); } else { this.setData({ showCloseIcon: true, }); this.triggerEvent('handleInput', { value: e.detail.value }); } }, handleSearch() { // 点击键盘上的回车调用此方法 this.setData({ showCloseIcon: false, }); console.log('handleSearch', this.data.inputValue); }, <view class='close-icon-wrapper' wx:if="{{showCloseIcon}}" bindtap='clearValue'> <image class='close-icon' src='/img/close.png' ></image> </view> <text bindtap='onTap'>搜索</text>

标签： lt 按钮搜索 gt

上一篇: 你还在发愁小程序自定义导航栏吗，华为下拉通知栏不见了
下一篇: 常规seo指的是白帽技术:SEO科普｜你的网站是否，白帽和黑帽

从0开发豆果美食小程序_搜索组件

热门文章

最新文章