概述
本篇文章介绍了从零开发一个微信小程序搜索组件的方法，希望对学习微信小程序开发的朋友有帮助！
如何从零开发微信小程序搜索组件
为组件设置一个容器，在容器中放置搜索图标、输入框、清除文字按钮和搜索按钮。
<view class="input-wrapper">
<icon class="search-icon"/>
<input
placeholder='{{placeholder}}'
value='{{inputValue}}'
bindinput='handleInput'
bindconfirm='handleSearch'
bindfocus='inputFocused'>
</input>
<view class="close-icon-wrapper">
<icon class="close-icon"/>
</view>
搜索
</view>登录后复制组件样式（推荐学习：小程序开发）
.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,
},登录后复制2、方法设置
事件流程
（1）光标不聚焦，没有任何输入——显示搜索图标、placeholder和搜索按钮。
（2）光标聚焦，没有任何输入——光标闪烁，显示搜索图标、placeholder和搜索按钮。
（3）光标聚焦，有输入——光标闪烁，显示搜索图标、输入文字、清除按钮和搜索按钮。
（4）光标不聚焦，有输入——显示搜索图标、输入文字、清除按钮和搜索按钮。
（5）按回车搜索——清除按钮隐藏。
（6）点击搜索按钮——清除按钮隐藏。
由此可见，需要 input 组件的聚焦和键盘输入事件。
<view
placeholder='{{placeholder}}'
value='{{inputValue}}'
bindinput='handleInput'
bindconfirm='handleSearch'
bindfocus='inputFocused'>
</view>登录后复制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);
},登录后复制搜索分别为 closeIcon 和 搜索按钮添加点击事件。
分别为 closeIcon 和 搜索按钮添加点击事件。
clearValue() {
this.triggerEvent('handleInput', {
value: ''
});
this.setData({
showCloseIcon: false,
});
},
onTap() {
this.setData({
showCloseIcon: false,
});
console.log('onTap', this.data.inputValue);
},组件 json
{
component:true
}登录后复制页面 json
工程的名字是 cookbook，这里组件前缀统一为 ck。
{
usingComponents:{
ck-input:/components/search/index
}
}登录后复制页面 wxml
<input
placeholder='搜你想吃的'
inputValue={{inputValue}}
bind:handleInput=handleInput>
</input>登录后复制页面 js
handleInput(e) {
this.setData({
inputValue: e.detail.value,
});
},登录后复制至此，搜索组件已完成初步开发。
PHP中文网，大量jquery视频教程，欢迎学习！
以上就是如何从零开发微信小程序搜索组件的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是追寻红酒为你收集整理的如何从零开发微信小程序搜索组件的全部内容，希望文章能够帮你解决如何从零开发微信小程序搜索组件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复