這篇文章將為大家詳細(xì)講解有關(guān)怎么從零開發(fā)微信小程序搜索組件，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在成都網(wǎng)站建設(shè)、成都網(wǎng)站制作過(guò)程中，需要針對(duì)客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。成都創(chuàng)新互聯(lián)還需要根據(jù)客戶的需求進(jìn)行功能模塊的開發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。

如何從零開發(fā)微信小程序搜索組件

為組件設(shè)置一個(gè)容器，在容器中放置搜索圖標(biāo)、輸入框、清除文字按鈕和搜索按鈕。

<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>

組件樣式（推薦學(xué)習(xí)：小程序開發(fā)）

container：高度 100 rpx，背景色 #eee，flex 布局。

input-wrapper：高度 80 rpx，背景色 #fff，flex 布局，border-radius: 20rpx。

search-icon：寬高 32 rpx。

input：字體和光標(biāo)顏色 #000，字體大小 32 rpx。

close-icon-wrapper：寬高 80 rpx，絕對(duì)定位。

text：搜索按鈕寬 110 rpx，高 65 rpx，絕對(duì)定位，左邊框 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;
}

組件功能

組件的構(gòu)造器中要注意區(qū)分 properties 和 data，properties 中寫組件的對(duì)外屬性，data 寫組件的對(duì)內(nèi)屬性。在本搜索組件中 placeholder 和 value 從頁(yè)面?zhèn)鱽?lái)，所以它們寫在 properties 中，控制清除按鈕是否出現(xiàn)的 showCloseIcon 要寫在 data 中。

properties: {
    placeholder: {
        type: String,
        value: '搜索' // 如果頁(yè)面不傳placeholder，顯示“搜索”
    },
    inputValue: {
        type: String
    }
},
data: {
    showCloseIcon: false,
},

2、方法設(shè)置

事件流程

（1）光標(biāo)不聚焦，沒(méi)有任何輸入——顯示搜索圖標(biāo)、placeholder和搜索按鈕。

（2）光標(biāo)聚焦，沒(méi)有任何輸入——光標(biāo)閃爍，顯示搜索圖標(biāo)、placeholder和搜索按鈕。

（3）光標(biāo)聚焦，有輸入——光標(biāo)閃爍，顯示搜索圖標(biāo)、輸入文字、清除按鈕和搜索按鈕。

（4）光標(biāo)不聚焦，有輸入——顯示搜索圖標(biāo)、輸入文字、清除按鈕和搜索按鈕。

（5）按回車搜索——清除按鈕隱藏。

（6）點(diǎn)擊搜索按鈕——清除按鈕隱藏。

由此可見，需要 input 組件的聚焦和鍵盤輸入事件。

<view
    placeholder='{{placeholder}}' 
    value='{{inputValue}}' 
    bindinput='handleInput' 
    bindconfirm='handleSearch'
    bindfocus='inputFocused'>
</view>

inputFocused：如果聚焦時(shí)，輸入框中有內(nèi)容，顯示 closeIcon；

handleInput：如果輸入時(shí)沒(méi)有內(nèi)容，不顯示 closeIcon，有內(nèi)容，顯示 closeIcon 并把值存入 value。

handleSearch：點(diǎn)擊回車后，不顯示 closeIcon。

triggerEvent：自定義組件觸發(fā)事件時(shí)，需要使用 triggerEvent 方法，指定事件名、detail對(duì)象和事件選項(xiàng)。

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() { // 點(diǎn)擊鍵盤上的回車，調(diào)用此方法
            this.setData({
                showCloseIcon: false,
            });
            console.log('handleSearch', this.data.inputValue);
        },

搜索分別為 closeIcon 和 搜索按鈕添加點(diǎn)擊事件。

分別為 closeIcon 和 搜索按鈕添加點(diǎn)擊事件。

clearValue() {
            this.triggerEvent('handleInput', {
                value: ''
            });
            this.setData({
                showCloseIcon: false,
            });
        },
        onTap() {
            this.setData({
                showCloseIcon: false,
            });
            console.log('onTap', this.data.inputValue);
        },組件 json
{
  component:true
}

頁(yè)面 json

工程的名字是 cookbook，這里組件前綴統(tǒng)一為 ck。

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

頁(yè)面 wxml

<input
    placeholder='搜你想吃的'
    inputValue={{inputValue}}
    bind:handleInput=handleInput>
</input>

頁(yè)面 js

handleInput(e) {
        this.setData({
            inputValue: e.detail.value,
        });
    },

關(guān)于怎么從零開發(fā)微信小程序搜索組件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站欄目：怎么從零開發(fā)微信小程序搜索組件-創(chuàng)新互聯(lián)
本文路徑：http://chinadenli.net/article16/dpssdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、域名注冊(cè)、營(yíng)銷型網(wǎng)站建設(shè)、軟件開發(fā)、網(wǎng)站內(nèi)鏈、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)