So entwickeln Sie eine WeChat-Applet-Suchkomponente von Grund auf

In diesem Artikel wird die Methode zur Entwicklung einer WeChat-Applet-Suchkomponente von Grund auf vorgestellt. Ich hoffe, dass er Freunden, die die WeChat-Applet-Entwicklung erlernen, hilfreich sein wird!

So entwickeln Sie eine WeChat-Applet-Suchkomponente von Grund auf

Legen Sie einen Container für die Komponente fest und platzieren Sie das Suchsymbol und die Eingabe im Containerfeld, Klartext-Schaltfläche und Suchschaltfläche.

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

Komponentenstil (empfohlenes Lernen: Mini-Programmentwicklung)

Container: Höhe 100 rpx, Hintergrundfarbe# eee, Flex-Layout.

Eingabe-Wrapper: Höhe 80 rpx, Hintergrundfarbe #fff, flexibles Layout, Rahmenradius: 20 rpx.

Suchsymbol: Breite und Höhe 32 rpx.

Eingabe: Schriftart und Cursorfarbe #000, Schriftgröße 32 rpx.

close-icon-wrapper: Breite und Höhe 80 rpx, absolute Positionierung.

Text: Suchschaltfläche 110 rpx breit, 65 rpx hoch, absolut positioniert, linker Rand 2 rpx durchgehend #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;
}

Komponentenfunktion

Achten Sie im Konstruktor der Komponente auf die Unterscheidung von Eigenschaften und Daten Komponente in Eigenschaften Bei externen Eigenschaften schreibt data die internen Eigenschaften der Komponente. In dieser Suchkomponente werden Platzhalter und Wert von der Seite übergeben, also in Eigenschaften geschrieben, und showCloseIcon, das steuert, ob die Schaltfläche „Löschen“ angezeigt wird, wird in Daten geschrieben.

properties: {
    placeholder: {
        type: String,
        value: '搜索' // 如果页面不传placeholder，显示“搜索”
    },
    inputValue: {
        type: String
    }
},
data: {
    showCloseIcon: false,
},

2. Methodeneinstellungen

Ereignisfluss

(1) Der Cursor ist nicht fokussiert und es gibt keine Eingabe – das Suchsymbol, Platzhalter und Suche werden angezeigt.

(2) Der Cursor ist fokussiert und es erfolgt keine Eingabe – der Cursor blinkt und das Suchsymbol, der Platzhalter und die Suchschaltfläche werden angezeigt.

(3) Der Cursor ist fokussiert und es erfolgt eine Eingabe – der Cursor blinkt und das Suchsymbol, der Eingabetext, die Löschtaste und die Suchtaste werden angezeigt.

(4) Der Cursor ist nicht fokussiert und es erfolgt eine Eingabe – zeigen Sie das Suchsymbol, den Eingabetext, die Schaltfläche „Löschen“ und die Schaltfläche „Suchen“ an.

(5) Drücken Sie die Eingabetaste, um zu suchen – die Schaltfläche „Löschen“ ist ausgeblendet.

(6) Klicken Sie auf die Suchschaltfläche – löschen Sie die Schaltfläche, um sie auszublenden.

Es ist ersichtlich, dass der Fokus und die Tastatureingabeereignisse der Eingabekomponente erforderlich sind.

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

inputFocused: Wenn beim Fokussieren Inhalt im Eingabefeld vorhanden ist, wird closeIcon angezeigt;

handleInput: Wenn beim Fokussieren kein Inhalt vorhanden ist Eingabe, es wird nicht angezeigt, closeIcon hat Inhalt, zeigt closeIcon an und speichert den Wert in value.

handleSearch: Nach dem Klicken auf die Eingabetaste wird das closeIcon nicht angezeigt.

triggerEvent: Wenn eine benutzerdefinierte Komponente ein Ereignis auslöst, müssen Sie die Methode „triggerEvent“ verwenden, um den Ereignisnamen, das Detailobjekt und die Ereignisoptionen anzugeben.

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

Suche fügt Klickereignisse für das CloseIcon bzw. die Suchschaltfläche hinzu.

Klickereignisse für das CloseIcon bzw. die Suchschaltfläche hinzufügen.

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

Page json

Der Name des Projekts ist Cookbook und das Komponentenpräfix hier ist einheitlich ck.

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

page wxml

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

page js

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

Zu diesem Zeitpunkt ist die anfängliche Entwicklung der Suchkomponente abgeschlossen.

PHP-Website für Chinesisch, eine große Anzahl von JQuery-Video-Tutorials, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie eine WeChat-Applet-Suchkomponente von Grund auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!