この記事の例では、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)を取得するいくつかの方法の詳細な説明
症状Centos7 ホストに crontab タスクを設定しましたが、時間が来るとメールを実行して「...
かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...
MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...
以下の目標を達成するため: Mysql データベースは、一定の間隔 (2 時間または 1 日、カスタ...
ウェブサイトが悪意を持ってリクエストされた場合、IP アドレスをブラックリストに登録することは重要な...
mysql コマンドを使用して、mysql のインストール パスを表示できます。 # 次の 2 つの...
Dockerエラー1. 原因を確認するdocker ログ ネクサス2. エラーの原因OpenJDK ...
1. MySQL マスタースレーブ非同期1.1 ネットワーク遅延MySQLのマスタースレーブレプリケ...
1. コマンドの紹介gzip (GNU zip) コマンドは、ファイルの圧縮と解凍に使用されます。こ...
機能別に並べ替えNN: このタグをサポートする Netscape の以前のバージョンを示しますIE:...
この記事では、MySQL group_concat を使用してグループ化されたフィールドを 1 つの...
フロントエンドがインターフェースを要求すると、バックエンドでインターフェースが定義されます。ステータ...
質問最近、プライベートミラーセンターにログインする必要がありましたが、ログイン時にエラーメッセージが...
上に示すように、ナビゲーションは上部に固定されており、左右にスライドしてさらにオプションをクリックで...
レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...