这篇文章主要介绍了美食菜谱类微信小程序的搜索组件怎么实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇美食菜谱类微信小程序的搜索组件怎么实现文章都会有所收获，下面我们一起来看看吧。
为组件设置一个容器，在容器中放置搜索图标、输入框、清除文字按钮和搜索按钮。
计算
安全
数据库
网络和加速
企业服务
<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，flex 布局。
input-wrapper：高度 80 rpx，背景色 #fff，flex 布局，border-radius: 20rpx。
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;
}组件的构造器中要注意区分 properties 和 data，properties 中写组件的对外属性，data 写组件的对内属性。在本搜索组件中 placeholder 和 value 从页面传来，所以它们写在 properties 中，控制清除按钮是否出现的 showCloseIcon 要写在 data 中。
properties: {
placeholder: {
type: String,
value: '搜索' // 如果页面不传placeholder，显示“搜索”
},
inputValue: {
type: String
}
},
data: {
showCloseIcon: false,
},（1）光标不聚焦，没有任何输入——显示搜索图标、placeholder和搜索按钮。
（2）光标聚焦，没有任何输入——光标闪烁，显示搜索图标、placeholder和搜索按钮。
（3）光标聚焦，有输入——光标闪烁，显示搜索图标、输入文字、清除按钮和搜索按钮。
（4）光标不聚焦，有输入——显示搜索图标、输入文字、清除按钮和搜索按钮。
（5）按回车搜索——清除按钮隐藏。
（6）点击搜索按钮——清除按钮隐藏。
由此可见，需要 input 组件的聚焦和键盘输入事件。
<input
placeholder='{{placeholder}}'
value='{{inputValue}}'
bindinput='handleInput'
bindconfirm='handleSearch'
bindfocus='inputFocused'>
</input>inputFocused：如果聚焦时，输入框中有内容，显示 closeIcon；
handleInput：如果输入时没有内容，不显示 closeIcon，有内容，显示 closeIcon 并把值存入 value。
handleSearch：点击回车后，不显示 closeIcon。
triggerEvent：自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项。
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>分别为 closeIcon 和 搜索按钮添加点击事件。
clearValue() {
this.triggerEvent('handleInput', {
value: ''
});
this.setData({
showCloseIcon: false,
});
},
onTap() {
this.setData({
showCloseIcon: false,
});
console.log('onTap', this.data.inputValue);
},{
"component":true
}工程的名字是 cookbook，这里组件前缀统一为 ck。
{
"usingComponents":{
"ck-input":"/components/search/index"
}
}<view class='container'><ck-input
placeholder='搜你想吃的'
inputValue="{{inputValue}}"
bind:handleInput="handleInput"></ck-input>
</view>handleInput(e) {
this.setData({
inputValue: e.detail.value,
});
},关于“美食菜谱类微信小程序的搜索组件怎么实现”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“美食菜谱类微信小程序的搜索组件怎么实现”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
