ホームページ > 記事 > ウェブフロントエンド > TVエンドシティリストを実装するためのVue+flexレイアウトを詳しく解説した記事
この記事では、Vue レイアウトに関する関連知識をお届けします。主に、Vue がテレビエンドの都市リスト効果を実現するためにどのようにフレックス レイアウトを使用するかを要約して紹介しています。非常に包括的かつ詳細です。一緒に見ていきましょう。できれば幸いです。困っている人を助けてください。
Vue はフレックス レイアウトを使用して TV に都市リストを実装します
都市リストと検索は Vue では非常に一般的です。このブログでは検索の実装方法について説明します都市リスト
1. 検索レイアウト コードの実装:
<div class="search-bar"> <input class="search-input" v-model="citySearchResult" :placeholder="searchDefault" :key="searchTitle" @endEditing="endEditing" :focusable="true" ref="searchInput" :duplicateParentState="true" :enableFocusBorder="true"/> <img class="index-root-search-image-view-css" :src="searchIcon" alt="TVエンドシティリストを実装するためのVue+flexレイアウトを詳しく解説した記事" > <span class="index-root-search-text-view-css" ref="textViewCity">{{searchDefaultKeyWord}}</span> </div>
2. 検索レイアウト CSS スタイル コード:
.search-bar-root { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 140px; }.index-root-search-title-css { flex-direction: column; align-items: center; justify-content: center; margin-bottom: 40px; }.search-bar-root .search-bar { background-color: #ffffff; width: 1000px; height: 100px; display: flex; justify-content: center; border-radius: 8px; }.search-input { width: 780px; border-radius: 8px; font-size: 36px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #000000; margin-left: 40px; text-indent: 40px; }.index-root-search-image-view-css { position: absolute; width: 32px; height: 32px; top: 35px; bottom: 35px; right: 0; margin-right: 102px; text-align: center; }.index-root-search-flex-view-css { display: flex; flex-wrap: wrap; flex-direction: row; width: 1450px; margin-left: 245px; margin-right: 245px; margin-top: 40px; }.index-root-search-text-view-css { font-size: 30px; font-family: PingFangSC-Regular, PingFang SC; color: #000000; text-align: center; font-weight: 400; top: 0; bottom: 0; right: 0; position: absolute; margin-right: 30px; }.index-root-search-title-text-view-css { font-size: 70px; font-family: PingFangSC-Regular, PingFang SC; color: #ffffff; text-align: center; opacity: 1.0; }.search-city-button-view-css { width: 270px; height: 100px; background-color: rgba(0, 0, 0, .1); margin-right: 20px; margin-top: 40px; border-radius: 11px; border-width: 2px; border-color: rgba(255, 255, 255, 0.1); focus-background-color: #fff; }.search-city-button-view-css .city-sel-box { border-width: 2px; border-color: #32C5FF; }
3. 都市リストのレイアウト コード:
<div> <div> <div> <img alt="TVエンドシティリストを実装するためのVue+flexレイアウトを詳しく解説した記事" > <img alt="TVエンドシティリストを実装するためのVue+flexレイアウトを詳しく解説した記事" > </div> <span>{{item.cityName}}</span> </div> <p><strong>4. 都市リストの CSS スタイル コード: </strong></p> <pre class="brush:php;toolbar:false">.index-root-search-flex-view-css { display: flex; flex-wrap: wrap; flex-direction: row; width: 1450px; margin-left: 245px; margin-right: 245px; margin-top: 40px; }.index-root-search-text-view-css { font-size: 30px; font-family: PingFangSC-Regular, PingFang SC; color: #000000; text-align: center; font-weight: 400; top: 0; bottom: 0; right: 0; position: absolute; margin-right: 30px; }.index-root-search-title-text-view-css { font-size: 70px; font-family: PingFangSC-Regular, PingFang SC; color: #ffffff; text-align: center; opacity: 1.0; }.search-city-button-view-css { width: 270px; height: 100px; background-color: rgba(0, 0, 0, .1); margin-right: 20px; margin-top: 40px; border-radius: 11px; border-width: 2px; border-color: rgba(255, 255, 255, 0.1); focus-background-color: #fff; }.search-city-button-view-css .city-sel-box { border-width: 2px; border-color: #32C5FF; }.icon-location-reactive { position: absolute; width: 26px; height: 34px; margin-left: 60px; margin-top: 30px; margin-bottom: 30px; }.icon-location { width: 26px; height: 34px; position: absolute; left: 0; top: 0; z-index: 9; }.search-city-hot-text-iew-css { width: 270px; height: 100px; background-color: rgba(50, 197, 255, 0.1); border-radius: 11px; border: 2px solid #32C5FF; font-size: 36px; font-family: PingFangSC-Regular, PingFang SC; text-align: center; color: white; }.search-city-empty { margin-top: 40px; width: 425px; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-left: 535px; }.search-city-empty .icon-no-connect { width: 425px; height: 307px; }.search-city-empty .empty-txt { font-size: 32px; font-family: PingFangSC-Light, PingFang SC; font-weight: 300; color: #FFFFFF; margin-top: 60px; }
5. 都市リストフォーカス イベントを取得します:
主に div で設定されます: focusable="true" および @focus="onFocus"
<div> <div> <img alt="TVエンドシティリストを実装するためのVue+flexレイアウトを詳しく解説した記事" > <img alt="TVエンドシティリストを実装するためのVue+flexレイアウトを詳しく解説した記事" > </div> <p><strong>6。フォーカスの背景色とフォント効果を設定します。 </strong></p> <p> 主に設定されるのは、duplicateParentState="true" テキストがフォーカスを取得すると、色は親レイアウトの影響を受けません。フォーカス倍率や境界線効果も設定できます </p> <pre class="brush:php;toolbar:false">:enableFocusBorder="true"//设置获得焦点时的边框 :focusScale="1.0"//设置焦点放大时的倍数
Focus効果スタイル: :style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}
<span>{{item.cityName}}</span>
7。検索ボックス入力イベント:
//输入内容之后请求城市列表接口刷新数据 endEditing(e) { console.log("--resultData--", this.citySearchResult) },
8. 検索ボックスがフォーカスを取得したときのイベント:
onFocus(e) { this.focused = e.isFocused; this.$emit("onButtonFocused", e.isFocused); },
9. TV ソフト キーボードがデフォルトでポップアップ表示されます:
mounted() { this.hotCity = hotCity; this.showHot = true; this.pageLoading = true //弹出软键盘 this.$refs.searchInput.focus() //搜索框默认获取焦点 this.setHideLoading() },
10完全なコードは次のとおりです:
<script>import searchImage from "@/assets/search_focus.png";import searchBackGroundImage from "@/assets/index-bg-qing.jpg";import {hotCity} from '@/views/contsants';import {ESLaunchManager} from "@extscreen/es-core";export default { name: "city_list", props: { searchKeyWord: { type: String, default: '', }, focusTextColor: { type: String, default: '#000000' }, focusHotTextColor: { type: String, default: '#00EFFF' }, textColor: { type: String, default: '#FFFFFF' }, textFontSize: { type: String, default: '30px' }, textFontWeight: { type: Number, default: 400 }, focusBackground: { orientation: 'TL_BR',//TOP_BOTTOM,TR_BL, RIGHT_LEFT, BR_TL, BOTTOM_TOP,BL_TR,LEFT_RIGHT,TL_BR, cornerRadius: [40, 40, 40, 40], normal: ['#00000000', '#00000000'], focused: ['#F5F5F5', '#F5F5F5'], }, }, data() { return { pageLoading: false, text: 'search city', search: '', searchIcon: searchImage, searchImageData: searchBackGroundImage, searchTitle: "切换城市", searchDefaultKeyWord: '搜索', searchDefault: '请输入城市名称首字母或全拼', focusColor: '#f5f5f5', citySearchResult: "", hotCity: [], cityName: "", cityId: "", showHot: true, params: '', } }, activated() { }, deactivated() { this.resetModel() }, mounted() { this.hotCity = hotCity; this.showHot = true; this.pageLoading = true //弹出软键盘 this.$refs.searchInput.focus() //搜索框默认获取焦点 this.setHideLoading() }, methods: { setHideLoading() { setTimeout(() => { this.pageLoading = false }, 500) }, onFocus(e) { this.focused = e.isFocused; this.$emit("onButtonFocused", e.isFocused); }, //输入内容之后请求城市 endEditing(e) { console.log("--resultData--", this.citySearchResult) }, onBackPressed() { ESLaunchManager.finishESPage(); }, resetModel() { this.citySearchResult = ""; this.hotCity = []; this.pageLoading = false; this.searchTitle = ""; this.searchDefaultKeyWord = ""; this.searchDefault = ""; }, } }</script>{{ searchTitle }}{{searchDefaultKeyWord}}<span>{{item.cityName}}</span>没有搜索结果~
11. 達成された効果のスクリーンショットは次のとおりです:
##関連する推奨事項:以上がTVエンドシティリストを実装するためのVue+flexレイアウトを詳しく解説した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。