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

作者：白芷

效果图

组件结构

为组件设置一个容器，在容器中放置搜索图标、输入框、清除文字按钮和搜索按钮。

<view class='container'>
    <'input-wrapper'>
        <image class='search-icon' src='/img/search.png'></image>
        <input 
        placeholder='{{placeholder}}' 
        value={{inputValue}}' 
        bindinput='handleInput' 
        bindconfirm='handleSearch'
        bindfocus='inputFocused'>
        </input>
        <'close-icon-wrapper' wx:if="{{showCloseIcon}}" bindtap='clearValue'>
        <'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 {
    align-items: center;
    80rpx;
    80%;
    #fff;
    border-radius: 20rpx;
}

.input-wrapper .search-icon {
    margin-left: 20rpx;
    32rpx;
    32rpx;
}

.input-wrapper input {
    10rpx;
    color: #000;
    font-size: caret-color: 60%;
}

.close-icon-wrapper{
    position: absolute;
    left: 480rpx;
    background:.close-icon {
    42rpx;
    42rpx;
}

text {
    right: 110rpx;
    65rpx;
    padding: 0;
    border-left: 2rpx solid #eee;
}

组件功能

1. 属性区分

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

properties: {
    placeholder: {
        type: String,value: '搜索' // 如果页面不传placeholder，显示“搜索”
    },inputValue: {
        type: String
    }
},51); font-weight: 700;">data: {
    showCloseIcon: false,},

2.方法设置

事件流程

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

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

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

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

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

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

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

 
    value=}' 
    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 == false,});
            } else {
                this.triggerEvent('handleInput',{
                    value: e.detail.value
                });
            }
        },handleSearch() { // 点击键盘上的回车，调用此方法
            this.setData({
                showCloseIcon: 'handleSearch',this.data.inputValue);
        },

>
    <image>
</view>
<text>

分别为 closeIcon 和 搜索按钮添加点击事件。

clearValue() {
            ''
            });
            'onTap',

组件 json

{
  "component":true
}

页面 json

工程的名字是 cookbook，这里组件前缀统一为 ck。

{
    "usingComponents":{
        "ck-input":"/components/search/index"
    }
}

页面 wxml

<view class='container'>
    <ck-input
    placeholder='搜你想吃的'
    inputValue="{{inputValue}}"
    bind:handleInput="handleInput">
    </ck-input>
</结束语
至此，搜索组件已完成初步开发。
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!