如何使用Vue+flex布局實(shí)現(xiàn)TV端城市列表
今天小編給大家分享一下如何使用Vue+flex布局實(shí)現(xiàn)TV端城市列表的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷，提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站開發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營(yíng)銷、微信小程序、公眾號(hào)商城、等建站開發(fā)，創(chuàng)新互聯(lián)網(wǎng)站建設(shè)策劃專家，為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢(shì)。
Vue利用flex布局實(shí)現(xiàn)TV端城市列表
vue中城市列表和搜索很常見，這篇博客就來說說咋實(shí)現(xiàn)搜索和城市列表
1.實(shí)現(xiàn)搜索布局代碼：
<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">
<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 class="index-root-search-flex-view-css" :clipChildren="false" ref="citySearch">
<div class="search-city-button-view-css"
v-for="(item,cityId) in hotCity" :focusable="true"
:key="cityId"
:ref="`hotRef${cityId}`" @focus="onFocus" :clipChildren="false">
<div class="icon-location-reactive" ref="searchLocation" :duplicateParentState="true" style="visibility: visible;margin-right: 20px" v-if="showHot && cityId===0">
<img src="@/assets/location.png" alt="" class="icon-location" showOnState="normal">
<img src="@/assets/location_hot_focus.png" alt="" class="icon-location" showOnState="focused">
</div>
<span class="search-city-hot-text-iew-css" :duplicateParentState="true" showOnState="focused"
ref="searchHotSelected"
:style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}">{{item.cityName}}</span>
</div>
4.城市列表css樣式代碼：
.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.城市列表獲取焦點(diǎn)的事件：
主要是在div設(shè)置:focusable="true"和@focus="onFocus"
<div class="search-city-button-view-css"
v-for="(item,cityId) in hotCity" :focusable="true"
:key="cityId"
:ref="`hotRef${cityId}`" @focus="onFocus" :clipChildren="false">
<div class="icon-location-reactive" ref="searchLocation" :duplicateParentState="true" style="visibility: visible;margin-right: 20px" v-if="showHot && cityId===0">
<img src="@/assets/location.png" alt="" class="icon-location" showOnState="normal">
<img src="@/assets/location_hot_focus.png" alt="" class="icon-location" showOnState="focused">
</div>
6.設(shè)置焦點(diǎn)背景顏色和字體效果：
主要是設(shè)置:duplicateParentState="true"當(dāng)文本獲得焦點(diǎn)時(shí)顏色不受父布局影響，還可以設(shè)置焦點(diǎn)放大和帶邊框效果
:enableFocusBorder="true"//設(shè)置獲得焦點(diǎn)時(shí)的邊框
:focusScale="1.0"//設(shè)置焦點(diǎn)放大時(shí)的倍數(shù)
焦點(diǎn)效果的樣式：:style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}
<span class="search-city-hot-text-iew-css" :duplicateParentState="true" showOnState="focused"
ref="searchHotSelected"
:style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}">{{item.cityName}}</span>
7.搜索框輸入事件：
//輸入內(nèi)容之后請(qǐng)求城市列表接口刷新數(shù)據(jù)
endEditing(e) {
console.log("--resultData--", this.citySearchResult)
},
8.搜索框獲取焦點(diǎn)的事件：
onFocus(e) {
this.focused = e.isFocused;
this.$emit("onButtonFocused", e.isFocused);
},
9.默認(rèn)彈出TV軟鍵盤：
mounted() {
this.hotCity = hotCity;
this.showHot = true;
this.pageLoading = true
//彈出軟鍵盤
this.$refs.searchInput.focus()
//搜索框默認(rèn)獲取焦點(diǎn)
this.setHideLoading()
},
10.完整代碼如下：
<template>
<div class="index-root-search-view-css" :clipChildren="false">
<img class="search-background-view-css" :src="searchImageData"/>
<div class="search-bar-root">
<div class="index-root-search-title-css">
<span class="index-root-search-title-text-view-css"> {{ searchTitle }}</span>
</div>
<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">
<span class="index-root-search-text-view-css" ref="textViewCity">{{searchDefaultKeyWord}}</span>
</div>
<div class="index-root-search-flex-view-css" :clipChildren="false" ref="citySearch">
<div class="search-city-button-view-css"
v-for="(item,cityId) in hotCity" :focusable="true"
:key="cityId"
:ref="`hotRef${cityId}`" @focus="onFocus" :clipChildren="false">
<div class="icon-location-reactive" ref="searchLocation" :duplicateParentState="true" style="visibility: visible;margin-right: 20px" v-if="showHot && cityId===0">
<img src="@/assets/location.png" alt="" class="icon-location" showOnState="normal">
<img src="@/assets/location_hot_focus.png" alt="" class="icon-location" showOnState="focused">
</div>
<span class="search-city-hot-text-iew-css" :duplicateParentState="true" showOnState="focused"
ref="searchHotSelected"
:style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}">{{item.cityName}}</span>
</div>
<div class="search-city-empty" v-if="hotCity.length === 0">
<img src="@/assets/no_content.png" alt="" class="icon-no-connect"/>
<p class="empty-txt">沒有搜索結(jié)果~</p>
</div>
</div>
</div>
<loading-view
style="width: 100px;height: 100px;position: absolute;left:960px;right:960px;top:500px;bottom:500px;align-self:
center;align-items: center;justify-content: center" v-show="pageLoading"/>
</div></template><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: '請(qǐng)輸入城市名稱首字母或全拼',
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()
//搜索框默認(rèn)獲取焦點(diǎn)
this.setHideLoading()
},
methods: {
setHideLoading() {
setTimeout(() => {
this.pageLoading = false
}, 500)
},
onFocus(e) {
this.focused = e.isFocused;
this.$emit("onButtonFocused", e.isFocused);
},
//輸入內(nèi)容之后請(qǐng)求城市
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><style scoped>.index-root-search-view-css {
width: 1920px;
height: 1080px;
background-color: transparent;
}.search-background-view-css {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: transparent;
}.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;
}.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;
}</style>
11.實(shí)現(xiàn)的效果截圖如下：
以上就是“如何使用Vue+flex布局實(shí)現(xiàn)TV端城市列表”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章題目：如何使用Vue+flex布局實(shí)現(xiàn)TV端城市列表
新聞來源：http://muchs.cn/article8/pdjdop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、外貿(mào)建站、營(yíng)銷型網(wǎng)站建設(shè)、服務(wù)器托管、關(guān)鍵詞優(yōu)化、企業(yè)建站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 如何通過seo關(guān)鍵詞優(yōu)化提升網(wǎng)站流量 2014-02-23
- 什么樣的網(wǎng)站設(shè)計(jì)風(fēng)格更容易被用戶所喜愛 2014-02-05
- 企業(yè)營(yíng)銷型網(wǎng)站建設(shè)之初應(yīng)該考慮到哪些內(nèi)容 2016-10-21
- SEO教程 SEO應(yīng)該怎樣定制網(wǎng)站不同時(shí)期的策略定位 2016-11-09
- 什么原因會(huì)導(dǎo)致文章不被收錄呢 2013-08-01
- 外貿(mào)建站推廣？八大技巧幫您引流 2016-03-01
- 怎樣制定一個(gè)完整的全網(wǎng)營(yíng)銷方案? 2015-09-23
- 成都網(wǎng)站制作公司哪家好？有排名嗎？ 2014-12-14
- 怎么才能做到網(wǎng)站頁面的收錄呢？ 2014-10-29
- 你應(yīng)該了解的網(wǎng)站營(yíng)銷推廣方法大全 2016-11-16
- 搜索引擎優(yōu)化是如何進(jìn)行優(yōu)化的? 2015-10-02
- 盤點(diǎn)：長(zhǎng)尾關(guān)鍵詞優(yōu)化的方法 2015-11-17