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

<テンプレート>
    <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>
</テンプレート>

<スクリプト>
    '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})
            }
        }
    }
</スクリプト>

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

</スタイル>