WeChat アプレット検索コンポーネントを最初から開発する方法

この記事では、WeChat アプレット検索コンポーネントをゼロから開発する方法を紹介します。WeChat アプレット開発を学習している友人の役に立てば幸いです。

WeChat アプレット検索コンポーネントを最初から開発する方法

コンポーネントのコンテナを設定し、検索アイコンを配置して入力しますコンテナボックス、クリアテキストボタン、検索ボタンにあります。

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

コンポーネント スタイル (推奨学習: 小さなプログラム開発)

コンテナ: 高さ 100 rpx、背景色#ええ、フレックスレイアウト。

入力ラッパー: 高さ 80 rpx、背景色 #fff、フレックス レイアウト、境界半径: 20 rpx。

検索アイコン: 幅と高さは 32 rpx。

入力: フォントとカーソルの色 #000、フォント サイズ 32 rpx。

close-icon-wrapper: 幅と高さ 80 rpx、絶対位置。

テキスト: 検索ボタン幅 110 rpx、高さ 65 rpx、絶対位置、左枠 2rpx 実線 #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;
}

コンポーネント関数

コンポーネントのコンストラクターでは、プロパティとデータの区別に注意してください。外部プロパティの場合、データはコンポーネントの内部プロパティを書き込みます。この検索コンポーネントでは、ページからプレースホルダーと値を渡すのでプロパティに記述し、クリアボタンを表示するかどうかを制御するshowCloseIconをデータに記述します。

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

2. メソッド設定

イベントプロセス

(1) カーソルはフォーカスされておらず、入力はありません - 検索アイコン、プレースホルダーと検索ボタンが表示されます。

(2) カーソルがフォーカスされており、何も入力されていません。カーソルが点滅し、検索アイコン、プレースホルダー、および検索ボタンが表示されます。

(3) カーソルがフォーカスされ、入力があります - カーソルが点滅し、検索アイコン、入力テキスト、クリア ボタン、検索ボタンが表示されます。

(4) カーソルはフォーカスされておらず、入力があります - 検索アイコン、入力テキスト、クリアボタン、検索ボタンが表示されます。

(5) Enter キーを押して検索します。クリア ボタンは非表示になります。

(6) 検索ボタンをクリックします。ボタンをクリアして非表示にします。

入力コンポーネントのフォーカスとキーボード入力イベントが必要であることがわかります。

<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: Enter をクリックしても、closeIcon が表示されません。

triggerEvent: カスタム コンポーネントがイベントをトリガーするときは、triggerEvent メソッドを使用してイベント名、詳細オブジェクト、およびイベント オプションを指定する必要があります。

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

検索では、closeIcon と検索ボタンのクリック イベントがそれぞれ追加されます。

closeIcon と検索ボタンのクリック イベントをそれぞれ追加します。

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

プロジェクトの名前は 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 中国語 Web サイト、多数の jquery ビデオ チュートリアル 、学習へようこそ!

以上がWeChat アプレット検索コンポーネントを最初から開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。