今天小编给大家分享一下如何使用Vue+flex布局实现TV端城市列表的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

创新互联致力于互联网网站建设与网站营销，提供成都网站建设、成都网站制作、网站开发、seo优化、网站排名、互联网营销、微信小程序、公众号商城、等建站开发，创新互联网站建设策划专家，为不同类型的客户提供良好的互联网应用定制解决方案，帮助客户在新的全球化互联网环境中保持优势。

Vue利用flex布局实现TV端城市列表

vue中城市列表和搜索很常见，这篇博客就来说说咋实现搜索和城市列表

1.实现搜索布局代码：

         @endEditing="endEditing" :focusable="true" ref="searchInput" :duplicateParentState="true"
        :enableFocusBorder="true"/>
 
 {{searchDefaultKeyWord}}

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.完整代码如下：

11.实现的效果截图如下：

以上就是“如何使用Vue+flex布局实现TV端城市列表”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。

文章标题：如何使用Vue+flex布局实现TV端城市列表
文章网址：http://myzitong.com/article/pdjdop.html