重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
今天小编给大家分享一下如何使用Vue+flex布局实现TV端城市列表的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
创新互联致力于互联网网站建设与网站营销,提供成都网站建设、成都网站制作、网站开发、seo优化、网站排名、互联网营销、微信小程序、公众号商城、等建站开发,创新互联网站建设策划专家,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。
Vue利用flex布局实现TV端城市列表
vue中城市列表和搜索很常见,这篇博客就来说说咋实现搜索和城市列表
1.实现搜索布局代码:
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.城市列表布局代码:
v-for="(item,cityId) in hotCity" :focusable="true"
:key="cityId"
:ref="`hotRef${cityId}`" @focus="onFocus" :clipChildren="false">
ref="searchHotSelected"
:style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}">{{item.cityName}}
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.城市列表获取焦点的事件:
主要是在div设置:focusable="true"和@focus="onFocus"
v-for="(item,cityId) in hotCity" :focusable="true"
:key="cityId"
:ref="`hotRef${cityId}`" @focus="onFocus" :clipChildren="false">
6.设置焦点背景颜色和字体效果:
主要是设置:duplicateParentState="true"当文本获得焦点时颜色不受父布局影响,还可以设置焦点放大和带边框效果
:enableFocusBorder="true"//设置获得焦点时的边框
:focusScale="1.0"//设置焦点放大时的倍数
焦点效果的样式::style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}
ref="searchHotSelected"
:style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}">{{item.cityName}}
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.完整代码如下:
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"/>
11.实现的效果截图如下:
以上就是“如何使用Vue+flex布局实现TV端城市列表”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。