首頁  >  文章  >  微信小程式  >  如何從零開發微信小程式搜尋元件

如何從零開發微信小程式搜尋元件

angryTom
angryTom轉載
2020-03-20 10:29:423202瀏覽

本篇文章介紹了從零開發一個微信小程式搜尋元件的方法,希望對學習微信小程式開發的朋友有幫助!

如何從零開發微信小程式搜尋元件

如何從零開發微信小程式搜尋元件

#為元件設定一個容器,在容器中放置搜尋圖示、輸入框、清除文字按鈕和搜尋按鈕。

如何從零開發微信小程式搜尋元件

<view class="input-wrapper">
    <icon class="search-icon"/>
    <input
        placeholder=&#39;{{placeholder}}&#39; 
        value=&#39;{{inputValue}}&#39; 
        bindinput=&#39;handleInput&#39; 
        bindconfirm=&#39;handleSearch&#39;
        bindfocus=&#39;inputFocused&#39;>
    </input>
    <view class="close-icon-wrapper">
        <icon class="close-icon"/>
    </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 {
    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: &#39;搜索&#39; // 如果页面不传placeholder,显示“搜索”
    },
    inputValue: {
        type: String
    }
},
data: {
    showCloseIcon: false,
},

2、方法設定

事件流程

(1)遊標不聚焦,沒有任何輸入-顯示搜尋圖示、placeholder和搜尋按鈕。

(2)遊標聚焦,沒有任何輸入-遊標閃爍,顯示搜尋圖示、placeholder和搜尋按鈕。

(3)遊標聚焦,有輸入-遊標閃爍,顯示搜尋圖示、輸入文字、清除按鈕和搜尋按鈕。

(4)遊標不聚焦,有輸入-顯示搜尋圖示、輸入文字、清除按鈕和搜尋按鈕。

(5)按回車搜尋-清除按鈕隱藏。

(6)點選搜尋按鈕-清除按鈕隱藏。

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

如何從零開發微信小程式搜尋元件

<view
    placeholder=&#39;{{placeholder}}&#39; 
    value=&#39;{{inputValue}}&#39; 
    bindinput=&#39;handleInput&#39; 
    bindconfirm=&#39;handleSearch&#39;
    bindfocus=&#39;inputFocused&#39;>
</view>

inputFocused:如果聚焦時,輸入框中有內容,顯示closeIcon;

handleInput:如果輸入時沒有內容,不顯示closeIcon,有內容,顯示closeIcon 並把值存入value。

handleSearch:點選回車後,不顯示 closeIcon。

triggerEvent:自訂元件觸發事件時,需要使用 triggerEvent 方法,指定事件名稱、detail物件和事件選項。

inputFocused(e) {
            if (e.detail.value !== &#39;&#39;) {
                this.setData({
                    showCloseIcon: true,
                });
            }
        },
        handleInput(e) {
            if (e.detail.value == &#39;&#39;) {
                this.setData({
                    showCloseIcon: false,
                });
            } else {
                this.setData({
                    showCloseIcon: true,
                });
                this.triggerEvent(&#39;handleInput&#39;, {
                    value: e.detail.value
                });
            }
        },
        handleSearch() { // 点击键盘上的回车,调用此方法
            this.setData({
                showCloseIcon: false,
            });
            console.log(&#39;handleSearch&#39;, this.data.inputValue);
        },

搜尋分別為 closeIcon 和 搜尋按鈕新增點擊事件。

分別為 closeIcon 和 搜尋按鈕新增點擊事件。

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

頁面 json

工程的名字是 cookbook,這裡元件前綴統一為 ck。

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

頁面 wxml

<input
    placeholder=&#39;搜你想吃的&#39;
    inputValue={{inputValue}}
    bind:handleInput=handleInput>
</input>

頁面 js

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

至此,搜尋元件已完成初步開發。

PHP中文網,大量jquery影片教學,歡迎學習!

以上是如何從零開發微信小程式搜尋元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:zixun.jisuapp.cn。如有侵權,請聯絡admin@php.cn刪除