商城系統(tǒng) 注冊

美食菜譜類微信小程序的設(shè)計(jì)與開發(fā)之搜索組件

2018-08-07|HiShop
導(dǎo)讀:美食菜譜類小程序非常受到微信小程序開發(fā)的歡迎,因?yàn)樾〕绦虻挠猛昙醋?,輕便無需下載,隨時(shí)可以在小程序中搜索不知道的菜譜,比如下廚房也開發(fā)了對于的美食菜譜小程序,那么關(guān)于美食...

美食菜譜類小程序非常受到微信小程序開發(fā)的歡迎,因?yàn)樾〕绦虻挠猛昙醋撸p便無需下載,隨時(shí)可以在小程序中搜索不知道的菜譜,比如下廚房也開發(fā)了對于的美食菜譜小程序,那么關(guān)于美食菜譜了類小程序要如何設(shè)計(jì)開發(fā),首先我們先講講美食菜譜小程序中最重要的搜索組件。

美食菜譜類微信小程序的設(shè)計(jì)與開發(fā)之搜索組件

1組件結(jié)構(gòu)

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

美食菜譜類微信小程序的設(shè)計(jì)與開發(fā)之搜索組件

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

2組件樣式

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,絕對定位。

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

3組件功能

1. 屬性區(qū)分

美食菜譜類微信小程序的設(shè)計(jì)與開發(fā)之搜索組件

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

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

2.方法設(shè)置

事件流程

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

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

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

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

(5)按回車搜索——清除按鈕隱藏。

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

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

美食菜譜類微信小程序的設(shè)計(jì)與開發(fā)之搜索組件

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

inputFocused:如果聚焦時(shí),輸入框中有內(nèi)容,顯示 closeIcon;

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

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

triggerEvent:自定義組件觸發(fā)事件時(shí),需要使用 triggerEvent 方法,指定事件名、detail對象和事件選項(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);
        },
<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 和 搜索按鈕添加點(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
}

頁面 json

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

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

頁面 wxml

<view class='container'>
    <ck-input
    placeholder='搜你想吃的'
    inputValue="{{inputValue}}"
    bind:handleInput="handleInput">
    </ck-input>
</view>

頁面 js

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

以上就是美食菜譜類微信小程序的設(shè)計(jì)與開發(fā)之搜索組件,美食餐飲類目前已經(jīng)成為了小程序開發(fā)中的熱門行業(yè),如果你也需要這樣的一個(gè)小程序,可以與我們咨詢。

HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請查看:小程序商店

美食菜譜類微信小程序的設(shè)計(jì)與開發(fā)之搜索組件

電話咨詢 預(yù)約演示 0元開店