【移动应用开发技术】怎么从零开发微信小程序搜索组件

【移动应用开发技术】怎么从零开发微信小程序搜索组件

这篇文章将为大家详细讲解有关怎么从零开发微信小程序搜索组件，在下觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。如何从零开发微信小程序搜索组件为组件设置一个容器，在容器中放置搜索图标、输入框、清除文字按钮和搜索按钮。<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：高度100rpx，背景色#eee，flex布局。input-wrapper：高度80rpx，背景色#fff，flex布局，border-radius:20rpx。search-icon：宽高32rpx。input：字体和光标颜色#000，字体大小32rpx。close-icon-wrapper：宽高80rpx，绝对定位。text：搜索按钮宽110rpx，高65rpx，绝对定位，左边框2rpxsolid#eee。container：高度100rpx，背景色#eee，flex布局。input-wrapper：高度80rpx，背景色#fff，flex布局，border-radius:20rpx。search-icon：宽高32rpx。input：字体和光标颜色#000，字体大小32rpx。close-icon-wrapper：宽高80rpx，绝对定位。text：搜索按钮宽110rpx，高65rpx，绝对定位，左边框2rpxsolid#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,

},2、方法设置事件流程（1）光标不聚焦，没有任何输入——显示搜索图标、placeholder和搜索按钮。（2）光标聚焦，没有任何输入——光标闪烁，显示搜索图标、placeholder和搜索按钮。（3）光标聚焦，有输入——光标闪烁，显示搜索图标、输入文字、清除按钮和搜索按钮。（4）光标不聚焦，有输入——显示搜索图标、输入文字、清除按钮和搜索按钮。（5）按回车搜索——清除按钮隐藏。（6）点击搜索按钮——清除按钮隐藏。由此可见，需要input组件的聚焦和键盘输入事件。<view

placeholder='{{placeholder}}'

value='{{inputValue}}'

bindinput='handleInput'

bindconfirm='handleSearch'

bindfocus='inputFocused'>

</view>inputFocused：如果聚焦时，输入框中有内容，显示closeIcon；handleInput：如果输入时没有内容，不显示closeIcon，有内容，显示closeIcon并把值存入value。handleSearch：点击回车后，不显示closeIcon。triggerEvent：自定义组件触发事件时，需要使用triggerEvent方法，指定事件名、detail对象和事件选项。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);

},搜索分别为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='搜你想吃的'

inputV