この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。
効果成し遂げる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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: LinuxスレッドのPID(TID、LWP)を取得するいくつかの方法の詳細な説明
序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...
1. PPTP VPNを構築するには、ポート1723とGREプロトコルを開く必要があります。 1. ...
目次構造を選択ループ構造その間…しながらforループ…のために…で…の…のためにまとめループの終了壊...
このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...
「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...
日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...
問題: JDBCを使用してMySQLデータベースに接続すると、中国語の文字を挿入すると文字化けした文...
PHP のコンパイル時に -enable-gd-jis-conv オプションを追加することで発生する...
目次アポロ コンフィギュレーション センターとは何ですか?アポロの特徴クライアントアーキテクチャアー...
数日前、同僚からMySQLのインデックスについて質問を受けました。大体わかっているのですが、まだ練習...
この記事では、docker 経由で Jenkins+Maven+SVN+Tomcat をデプロイし、...
<br />みなさんこんにちは!ここで皆さんとチャットできて光栄です! (*^__^*)...
最近、クライアントのために印刷していたとき、ページのヘッダーを印刷するのではなく、表の内容だけを印刷...
目次1.Json文字列1.1Json構文1.2 例2. クッキー2.1 使い方は? 3. ローカルス...
概要データベースでは、ツリー ディレクトリと同様に、インデックスを使用してデータ検索を高速化します。...