JS は VUE コンポーネントに基づいて都市リスト効果を実装します

JS は VUE コンポーネントに基づいて都市リスト効果を実装します

この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

  • 基本的な考え方は、都市リストデータをローカルにキャッシュすることです
  • 次に、ページ上で JS を使用して、インスタント ファジー クエリや最初の文字の配置クエリなどを実装します。
  • プロジェクトを保護するために、一部のコードは削除されました

効果

成し遂げる

H5:

<テンプレート>
    <div id="都市">
        <div class="検索都市に戻る">
            <div class="検索都市">
                <img src="../assets/img/Shop/search.png">
                <input type="text" placeholder="都市名を入力してください" v-model="citySearch">
                <a @click="citySearch=''" href="javascript:;" class="img-del" v-show="citySearch"></a>
            </div>
        </div>
        <div class="city-content">
            <div id="showCityContent"></div>
            <div class="letter-item" v-if="showCity&&sourcePageType===1">
                <div></div>
                <div @click="cityChoose('*','全国')">全国</div>
            </div>
            <div v-for="(val,key) in showCity" class="letter-item">
                <div><a :id="key">{{key}}</a></div>
                <div v-for="i in val">
                    <div :class="{'city-hide': i.Code==='*'&&sourcePageType===3}" class="item-buttom"
                         @click="cityChoose(i.Code,i.Name)">{{i.Name}}


                    </div>
                </div>
            </div>
        </div>
        <aside class="letter-aside" :style="{color: config.letterColor}" v-if="showCity">
            <ul>
                <!--<li>配置</li>-->
                <!--<li>人気</li>-->
                <li v-for="(val,key) in showCity" @click="naver(key)">{{key}} </li>
            </ul>
        </余談>
        <div id="tip">{{tipString}}</div>
    </div>
</テンプレート>

JS:

<スクリプト>
    'service' から {GetCityList} をインポートします
    '../utils/method' から {setTitle、setSessionStore、getSessionStore} をインポートします。

    エクスポートデフォルト{
        名前: 'CityList',
        データ () {
            戻る {
                citysAllSSKey: 'XMall-Component-AllCityList', // すべての都市のセッション キャッシュ cities: [],
                表示都市: null、
                ヒント文字列: null、
                文字: null、
                都市検索: '',
                ソースページタイプ: 1
            }
        },
        小道具: {
            設定: {
                タイプ: オブジェクト、
                デフォルト: () => {
                    戻る {
                        文字色: '#f44f0f',
                    }
                }
            },
            ページタイプ: {
                タイプ: 数値、
                デフォルト: 1 // 1: 全国の都市リスト},
            ショップID: {
                タイプ: 文字列、 
                デフォルト: null
            }
        },
        時計:
            citySearch: 関数 () {
                this.cityFilter()
            }
        },
        作成: 関数 () {
            setTitle('都市を選択')
        },
        マウント: 関数 () {
            これを()
        },
        メソッド: {
            の中へ(){
                this.sourcePageType = parseInt(this.$props.pageType)
                this.sourcePageType === 1 の場合 {
                    this.cities = JSON.parse(getSessionStore(this.citysAllSSKey))
                    if (this.cities) {
                        this.showCity = this.cities
                    } それ以外 {
                        すべての都市リストを取得する()
                    }
                }
            },
            // 全国の都市リストを取得する getAllCityList: function () {
                // ディスプレイの読み込み
                this.$vux.loading.show({text: '読み込み中'})
                都市リストを取得する(
                    {
                        キーワード: ''
                    },
                    (res) => {
                        this.citys = 住所
                        this.showCity = res
                        //読み込みを非表示
                        this.$vux.loading.hide()
                        setSessionStore(this.citysAllSSKey, res)
                    }, (エラー) => {
                        コンソール.log(エラー)
                        //読み込みを非表示
                        this.$vux.loading.hide()
                    })
            },
            // サイド文字を配置し、対応する位置までスクロールします naver: function (letter) {
                this.tipString = 文字
                obj = document.getElementById(文字) とします。
                tip = document.getElementById('tip') とします。
                tip.setAttribute('class', 'tipAppear')
                setTimeout(関数() {
                    tip.removeAttribute('class')
                }, 500)
                oPos = obj.offsetTop とします。
                window.scrollTo(0, oPos - 36) を返します
            },
            // 都市検索 cityFilter: function () {
                nodata = true とします
                if (this.citySearch) {
                    // オブジェクトを走査し、条件を満たす値を選択します。let showCityNew = {}
                    for (let key in this.cities) {
                        arrayNew = [] とします
                        for (this.cities[key]の値) {
                            if (value.Name.indexOf(this.citySearch) > -1) {
                                配列New.push(値)
                            }
                        }
                        配列の新しい長さが 0 より大きい場合
                            showCityNew[キー] = arrayNew
                            nodata = 偽
                        }
                    }
                    this.showCity = showCityNew
                } それ以外 {
                    this.showCity = this.cities
                    nodata = 偽
                }
                (データなし)の場合{
                    this.showCity = null
                    _showCityContent = document.getElementById('showCityContent') を設定します。
                    _showCityContent.innerText = '結果が見つかりませんでした'
                    _showCityContent.setAttribute('class', 'tipShow')
                } それ以外 {
                    document.getElementById('showCityContent').innerText = ''
                }
            },
            //都市の選択 cityChoose: function (code, name) {
                this.$emit('chooseCity', {コード: code, 名前: name})
            }
        }
    }
</スクリプト>

CS: ...

<style lang="scss" スコープ>
  #市 {
    位置: 相対的;
    背景: #f6f4f5;
  }
  #市{
    .city-content {
      パディング: 60px 0 0 0;
    }

    .letter-item{
      背景色: #fff;
    }

    .letter-item > div:first-child {
      色: #999;
      背景: #f6f4f5;
      右マージン: 30px;
    }

    .letter-item > div {
      色: #333;
      行の高さ: 45px;
      フォントサイズ: 14px;
      パディング: 0 30px 0 15px;
      背景色: #fff;
    }

    .letter-item .item-buttom {
      下境界線: 1px 実線 #e6e6e6;
    }

    .letter-aside {
      位置: 固定;
      右: 5px;
      トップ:5.3rem;
    }

    .letter-aside ul {
      リストスタイル: なし;
      行の高さ: 1.4em;
      フォントサイズ: 14px;
      テキスト配置: 中央;
    }

    #ヒント {
      位置: 固定;
      左: 0;
      右: 0;
      上: 0;
      下部: 0;
      マージン: 自動;
      境界線: 1px 実線 #333333;
      幅: 100ピクセル;
      高さ: 100px;
      zインデックス: 10;
      テキスト配置: 中央;
      行の高さ: 100px;
      フォントサイズ: 50px;
      不透明度: 0;
    }

    .tipAppear {
      アニメーション: appearTip 1 linear 0.5s;
    }

    @-webkit-keyframes 表示ヒント {
      0% {
        不透明度: 1;
      }
      80% {
        不透明度: 0.5;
      }
      100% {
        不透明度: 0;
      }
    }

    @keyframes が表示されるヒント {
      0% {
        不透明度: 1;
      }
      80% {
        不透明度: 0.5;
      }
      100% {
        不透明度: 0;
      }
    }

    .search-city-back {
      幅: 100%;
      位置: 固定;
      背景色: #f6f4f5;
      最大幅: 414px;
    }

    .検索都市{
      高さ: 30px;
      行の高さ: 30px;
      パディング: 0 15px;
      境界線の半径: 14px;
      マージン: 12px 15px;
      背景色: #ffffff;
    }

    .search-city画像{
      高さ: 18px;
      幅: 18px;
    }

    .search-city 入力 {
      幅: 80%;
      左マージン: 5px;
      行の高さ: 24px;
      境界線の半径: 5px;
      アウトライン: なし;
      フォントサイズ: 15px;
    }

    .tipShow {
      テキスト配置: 中央;
      行の高さ: 60px;
      フォントサイズ: 16px;
      色: #bbbbbb;
    }

    .city-hide {
      表示: なし;
    }

    .img-del {
      幅: 16px;
      高さ: 16px;
      位置: 絶対;
      上: 19px;
      右: 30px;
      背景色: rgba(0, 0, 0, .2);
      境界線の半径: 8px;
    }

    .img-del::before、.img-del::after {
      コンテンツ: ' ';
      幅: 0;
      高さ: 50%;
      位置: 絶対;
      上: 4px;
      右: 7px;
      右境界線: 1px 実線 #fff;
    }

    .img-del::before {
      変換: 回転(45度);
    }

    .img-del::after {
      変換: 回転(-45度);
    }
  }

</スタイル>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueは都市リスト選択機能を実装しました
  • HTML モバイル都市リストインデックス選択都市を実装するためのネイティブ js
  • JSはナビゲーション都市リストと入力検索機能を実装します
  • JS は、ソース コードのダウンロードにより、モバイル端末で都市リストの最初の文字を検索する機能を実装します。

<<:  Mybatisの各SQL文の実行時間の統計

>>:  LinuxスレッドのPID(TID、LWP)を取得するいくつかの方法の詳細な説明

推薦する

jsのイベントループ機構の解析

序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...

Alibaba Cloud Ubuntu 16.04でpptpdサービスを構築する方法

1. PPTP VPNを構築するには、ポート1723とGREプロトコルを開く必要があります。 1. ...

JavaScript プログラムのループ構造の詳細な説明

目次構造を選択ループ構造その間…しながらforループ…のために…で…の…のためにまとめループの終了壊...

Vue でのスロット配置と使用状況分析

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...

MySql Group Byは複数のフィールドのグループ化を実装します

日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...

IdeaでMySQLデータベースに接続すると中国語の文字化けが発生する問題

問題: JDBCを使用してMySQLデータベースに接続すると、中国語の文字を挿入すると文字化けした文...

docker-compose を使用して Apollo カスタム環境をデプロイする詳細なチュートリアル

目次アポロ コンフィギュレーション センターとは何ですか?アポロの特徴クライアントアーキテクチャアー...

MySQLインデックスに関する詳細を共有する

数日前、同僚からMySQLのインデックスについて質問を受けました。大体わかっているのですが、まだ練習...

Jenkins初心者のためのDockerデプロイメントチュートリアルの詳細な説明

この記事では、docker 経由で Jenkins+Maven+SVN+Tomcat をデプロイし、...

ウェブデザインの仕事に応募する方法

<br />みなさんこんにちは!ここで皆さんとチャットできて光栄です! (*^__^*)...

ウェブページ印刷細線表+ページ印刷究極の戦略

最近、クライアントのために印刷していたとき、ページのヘッダーを印刷するのではなく、表の内容だけを印刷...

JS 内の Json 文字列 + Cookie + ローカルストレージ

目次1.Json文字列1.1Json構文1.2 例2. クッキー2.1 使い方は? 3. ローカルス...

MySQL 学習 (VII): Innodb ストレージ エンジン インデックスの実装原理の詳細説明

概要データベースでは、ツリー ディレクトリと同様に、インデックスを使用してデータ検索を高速化します。...