首页-教程-Web前端

一文详解Vue+flex布局实现TV端城市列表

 3165

本篇文章给大家带来了关于Vue布局的相关知识，其中主要给大家总结介绍Vue是怎么利用flex布局来实现TV端城市列表效果的，非常全面详细，下面一起来看一下，希望对需要的朋友有所帮助。

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

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

1、实现搜索布局代码：

  1. <div class="search-bar">
  2.   <input class="search-input" v-model="citySearchResult" :placeholder="searchDefault" :key="searchTitle"
  3.          @endEditing="endEditing" :focusable="true" ref="searchInput" :duplicateParentState="true"
  4.          :enableFocusBorder="true"/>
  5.   <img class="index-root-search-image-view-css" :src="searchIcon">
  6.   <span class="index-root-search-text-view-css" ref="textViewCity">{{searchDefaultKeyWord}}</span>
  7. </div>

2、搜索布局css样式代码：

  1. .search-bar-root {
  2.   display: flex;
  3.   flex-direction: column;
  4.   align-items: center;
  5.   justify-content: center;
  6.   margin-top: 140px;
  7. }
  8. .index-root-search-title-css {
  9.   flex-direction: column;
  10.   align-items: center;
  11.   justify-content: center;
  12.   margin-bottom: 40px;
  13. }
  14. .search-bar-root .search-bar {
  15.   background-color: #ffffff;
  16.   width: 1000px;
  17.   height: 100px;
  18.   display: flex;
  19.   justify-content: center;
  20.   border-radius: 8px;
  21. }
  22. .search-input {
  23.   width: 780px;
  24.   border-radius: 8px;
  25.   font-size: 36px;
  26.   font-family: PingFangSC-Regular, PingFang SC;
  27.   font-weight: 400;
  28.   color: #000000;
  29.   margin-left: 40px;
  30.   text-indent: 40px;
  31. }
  32. .index-root-search-image-view-css {
  33.   position: absolute;
  34.   width: 32px;
  35.   height: 32px;
  36.   top: 35px;
  37.   bottom: 35px;
  38.   right: 0;
  39.   margin-right: 102px;
  40.   text-align: center;
  41. }
  42. .index-root-search-flex-view-css {
  43.   display: flex;
  44.   flex-wrap: wrap;
  45.   flex-direction: row;
  46.   width: 1450px;
  47.   margin-left: 245px;
  48.   margin-right: 245px;
  49.   margin-top: 40px;
  50. }
  51. .index-root-search-text-view-css {
  52.   font-size: 30px;
  53.   font-family: PingFangSC-Regular, PingFang SC;
  54.   color: #000000;
  55.   text-align: center;
  56.   font-weight: 400;
  57.   top: 0;
  58.   bottom: 0;
  59.   right: 0;
  60.   position: absolute;
  61.   margin-right: 30px;
  62. }
  63. .index-root-search-title-text-view-css {
  64.   font-size: 70px;
  65.   font-family: PingFangSC-Regular, PingFang SC;
  66.   color: #ffffff;
  67.   text-align: center;
  68.   opacity: 1.0;
  69. }
  70. .search-city-button-view-css {
  71.   width: 270px;
  72.   height: 100px;
  73.   background-color: rgba(0, 0, 0, .1);
  74.   margin-right: 20px;
  75.   margin-top: 40px;
  76.   border-radius: 11px;
  77.   border-width: 2px;
  78.   border-color: rgba(255, 255, 255, 0.1);
  79.   focus-background-color: #fff;
  80. }
  81. .search-city-button-view-css .city-sel-box {
  82.   border-width: 2px;
  83.   border-color: #32C5FF;
  84. }

3、城市列表布局代码：

  1. <div class="index-root-search-flex-view-css" :clipChildren="false" ref="citySearch">
  2.   <div class="search-city-button-view-css"
  3.        v-for="(item,cityId) in hotCity" :focusable="true"
  4.        :key="cityId"
  5.        :ref="`hotRef${cityId}`" @focus="onFocus" :clipChildren="false">
  6.     <div class="icon-location-reactive" ref="searchLocation" :duplicateParentState="true" style="visibility: visible;margin-right: 20px" v-if="showHot && cityId===0">
  7.       <img src="@/assets/location.png" alt="" class="icon-location" showOnState="normal">
  8.       <img src="@/assets/location_hot_focus.png" alt="" class="icon-location" showOnState="focused">
  9.     </div>
  10.     <span class="search-city-hot-text-iew-css" :duplicateParentState="true" showOnState="focused"
  11.           ref="searchHotSelected"
  12.           :style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}">{{item.cityName}}</span>
  13.   </div>

4、城市列表css样式代码：

  1. .index-root-search-flex-view-css {
  2.   display: flex;
  3.   flex-wrap: wrap;
  4.   flex-direction: row;
  5.   width: 1450px;
  6.   margin-left: 245px;
  7.   margin-right: 245px;
  8.   margin-top: 40px;
  9. }
  10. .index-root-search-text-view-css {
  11.   font-size: 30px;
  12.   font-family: PingFangSC-Regular, PingFang SC;
  13.   color: #000000;
  14.   text-align: center;
  15.   font-weight: 400;
  16.   top: 0;
  17.   bottom: 0;
  18.   right: 0;
  19.   position: absolute;
  20.   margin-right: 30px;
  21. }
  22. .index-root-search-title-text-view-css {
  23.   font-size: 70px;
  24.   font-family: PingFangSC-Regular, PingFang SC;
  25.   color: #ffffff;
  26.   text-align: center;
  27.   opacity: 1.0;
  28. }
  29. .search-city-button-view-css {
  30.   width: 270px;
  31.   height: 100px;
  32.   background-color: rgba(0, 0, 0, .1);
  33.   margin-right: 20px;
  34.   margin-top: 40px;
  35.   border-radius: 11px;
  36.   border-width: 2px;
  37.   border-color: rgba(255, 255, 255, 0.1);
  38.   focus-background-color: #fff;
  39. }
  40. .search-city-button-view-css .city-sel-box {
  41.   border-width: 2px;
  42.   border-color: #32C5FF;
  43. }
  44. .icon-location-reactive {
  45.   position: absolute;
  46.   width: 26px;
  47.   height: 34px;
  48.   margin-left: 60px;
  49.   margin-top: 30px;
  50.   margin-bottom: 30px;
  51. }
  52. .icon-location {
  53.   width: 26px;
  54.   height: 34px;
  55.   position: absolute;
  56.   left: 0;
  57.   top: 0;
  58.   z-index: 9;
  59. }
  60. .search-city-hot-text-iew-css {
  61.   width: 270px;
  62.   height: 100px;
  63.   background-color: rgba(50, 197, 255, 0.1);
  64.   border-radius: 11px;
  65.   border: 2px solid #32C5FF;
  66.   font-size: 36px;
  67.   font-family: PingFangSC-Regular, PingFang SC;
  68.   text-align: center;
  69.   color: white;
  70. }
  71. .search-city-empty {
  72.   margin-top: 40px;
  73.   width: 425px;
  74.   display: flex;
  75.   align-items: center;
  76.   justify-content: center;
  77.   flex-direction: column;
  78.   margin-left: 535px;
  79. }
  80. .search-city-empty .icon-no-connect {
  81.   width: 425px;
  82.   height: 307px;
  83. }
  84. .search-city-empty .empty-txt {
  85.   font-size: 32px;
  86.   font-family: PingFangSC-Light, PingFang SC;
  87.   font-weight: 300;
  88.   color: #FFFFFF;
  89.   margin-top: 60px;
  90. }

5、城市列表获取焦点的事件：

主要是在div设置:focusable="true"和@focus="onFocus"

  1. <div class="search-city-button-view-css"
  2.              v-for="(item,cityId) in hotCity" :focusable="true"
  3.              :key="cityId"
  4.              :ref="`hotRef${cityId}`" @focus="onFocus" :clipChildren="false">
  5.           <div class="icon-location-reactive" ref="searchLocation" :duplicateParentState="true" style="visibility: visible;margin-right: 20px" v-if="showHot && cityId===0">
  6.             <img src="@/assets/location.png" alt="" class="icon-location" showOnState="normal">
  7.             <img src="@/assets/location_hot_focus.png" alt="" class="icon-location" showOnState="focused">
  8.  </div>

6、设置焦点背景颜色和字体效果：

主要是设置:duplicateParentState="true"当文本获得焦点时颜色不受父布局影响，还可以设置焦点放大和带边框效果

  1. :enableFocusBorder="true"//设置获得焦点时的边框
  2. :focusScale="1.0"//设置焦点放大时的倍数

焦点效果的样式：:style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}

  1. <span class="search-city-hot-text-iew-css" :duplicateParentState="true" showOnState="focused"
  2.       ref="searchHotSelected"
  3.       :style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}">{{item.cityName}}</span>

7、搜索框输入事件：

  1. //输入内容之后请求城市列表接口刷新数据
  2. endEditing(e) {
  3.   console.log("--resultData--", this.citySearchResult)
  4. },

8、搜索框获取焦点的事件：

  1. onFocus(e) {
  2.   this.focused = e.isFocused;
  3.   this.$emit("onButtonFocused", e.isFocused);
  4. },

9、默认弹出TV软键盘：

  1. mounted() {
  2.   this.hotCity = hotCity;
  3.   this.showHot = true;
  4.   this.pageLoading = true
  5.   //弹出软键盘
  6.   this.$refs.searchInput.focus()
  7.   //搜索框默认获取焦点
  8.   this.setHideLoading()
  9. },

10、完整代码如下：

  1. <template>
  2.   <div class="index-root-search-view-css" :clipChildren="false">
  3.     <img class="search-background-view-css" :src="searchImageData"/>
  4.     <div class="search-bar-root">
  5.       <div class="index-root-search-title-css">
  6.         <span class="index-root-search-title-text-view-css"> {{ searchTitle }}</span>
  7.       </div>
  8.       <div class="search-bar">
  9.         <input class="search-input" v-model="citySearchResult" :placeholder="searchDefault" :key="searchTitle"
  10.                @endEditing="endEditing" :focusable="true" ref="searchInput" :duplicateParentState="true"
  11.                :enableFocusBorder="true"/>
  12.         <img class="index-root-search-image-view-css" :src="searchIcon">
  13.         <span class="index-root-search-text-view-css" ref="textViewCity">{{searchDefaultKeyWord}}</span>
  14.       </div>
  15.       <div class="index-root-search-flex-view-css" :clipChildren="false" ref="citySearch">
  16.         <div class="search-city-button-view-css"
  17.              v-for="(item,cityId) in hotCity" :focusable="true"
  18.              :key="cityId"
  19.              :ref="`hotRef${cityId}`" @focus="onFocus" :clipChildren="false">
  20.           <div class="icon-location-reactive" ref="searchLocation" :duplicateParentState="true" style="visibility: visible;margin-right: 20px" v-if="showHot && cityId===0">
  21.             <img src="@/assets/location.png" alt="" class="icon-location" showOnState="normal">
  22.             <img src="@/assets/location_hot_focus.png" alt="" class="icon-location" showOnState="focused">
  23.           </div>
  24.           <span class="search-city-hot-text-iew-css" :duplicateParentState="true" showOnState="focused"
  25.                 ref="searchHotSelected"
  26.                 :style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}">{{item.cityName}}</span>
  27.         </div>
  28.         <div class="search-city-empty" v-if="hotCity.length === 0">
  29.           <img src="@/assets/no_content.png" alt="" class="icon-no-connect"/>
  30.           <p class="empty-txt">没有搜索结果~</p>
  31.         </div>
  32.       </div>
  33.     </div>
  34.     <loading-view
  35.         style="width: 100px;height: 100px;position: absolute;left:960px;right:960px;top:500px;bottom:500px;align-self:
  36.         center;align-items: center;justify-content: center" v-show="pageLoading"/>
  37.   </div>
  38. </template>
  39. <script>
  40. import searchImage from "@/assets/search_focus.png";
  41. import searchBackGroundImage from "@/assets/index-bg-qing.jpg";
  42. import {hotCity} from '@/views/contsants';
  43. import {ESLaunchManager} from "@extscreen/es-core";
  44. export default {
  45.   name: "city_list",
  46.   props: {
  47.     searchKeyWord: {
  48.       type: String,
  49.       default: '',
  50.     },
  51.     focusTextColor: {
  52.       type: String,
  53.       default: '#000000'
  54.     },
  55.     focusHotTextColor: {
  56.       type: String,
  57.       default: '#00EFFF'
  58.     },
  59.     textColor: {
  60.       type: String,
  61.       default: '#FFFFFF'
  62.     },
  63.     textFontSize: {
  64.       type: String,
  65.       default: '30px'
  66.     },
  67.     textFontWeight: {
  68.       type: Number,
  69.       default: 400
  70.     },
  71.     focusBackground: {
  72.       orientation: 'TL_BR',//TOP_BOTTOM,TR_BL, RIGHT_LEFT, BR_TL, BOTTOM_TOP,BL_TR,LEFT_RIGHT,TL_BR,
  73.       cornerRadius: [40, 40, 40, 40],
  74.       normal: ['#00000000', '#00000000'],
  75.       focused: ['#F5F5F5', '#F5F5F5'],
  76.     },
  77.   },
  78.   data() {
  79.     return {
  80.       pageLoading: false,
  81.       text: 'search city',
  82.       search: '',
  83.       searchIcon: searchImage,
  84.       searchImageData: searchBackGroundImage,
  85.       searchTitle: "切换城市",
  86.       searchDefaultKeyWord: '搜索',
  87.       searchDefault: '请输入城市名称首字母或全拼',
  88.       focusColor: '#f5f5f5',
  89.       citySearchResult: "",
  90.       hotCity: [],
  91.       cityName: "",
  92.       cityId: "",
  93.       showHot: true,
  94.       params: '',
  95.     }
  96.   },
  97.   activated() {
  98.   },
  99.   deactivated() {
  100.     this.resetModel()
  101.   },
  102.   mounted() {
  103.     this.hotCity = hotCity;
  104.     this.showHot = true;
  105.     this.pageLoading = true
  106.     //弹出软键盘
  107.     this.$refs.searchInput.focus()
  108.     //搜索框默认获取焦点
  109.     this.setHideLoading()
  110.   },
  111.   methods: {
  112.     setHideLoading() {
  113.       setTimeout(() => {
  114.         this.pageLoading = false
  115.       }, 500)
  116.     },
  117.     onFocus(e) {
  118.       this.focused = e.isFocused;
  119.       this.$emit("onButtonFocused", e.isFocused);
  120.     },
  121.     //输入内容之后请求城市
  122.     endEditing(e) {
  123.       console.log("--resultData--", this.citySearchResult)
  124.     },
  125.     onBackPressed() {
  126.       ESLaunchManager.finishESPage();
  127.     },
  128.     resetModel() {
  129.       this.citySearchResult = "";
  130.       this.hotCity = [];
  131.       this.pageLoading = false;
  132.       this.searchTitle = "";
  133.       this.searchDefaultKeyWord = "";
  134.       this.searchDefault = "";
  135.     },
  136.   }
  137. }
  138. </script>
  139. <style scoped>
  140. .index-root-search-view-css {
  141.   width: 1920px;
  142.   height: 1080px;
  143.   background-color: transparent;
  144. }
  145. .search-background-view-css {
  146.   position: absolute;
  147.   left: 0;
  148.   top: 0;
  149.   right: 0;
  150.   bottom: 0;
  151.   background-color: transparent;
  152. }
  153. .search-bar-root {
  154.   display: flex;
  155.   flex-direction: column;
  156.   align-items: center;
  157.   justify-content: center;
  158.   margin-top: 140px;
  159. }
  160. .index-root-search-title-css {
  161.   flex-direction: column;
  162.   align-items: center;
  163.   justify-content: center;
  164.   margin-bottom: 40px;
  165. }
  166. .search-bar-root .search-bar {
  167.   background-color: #ffffff;
  168.   width: 1000px;
  169.   height: 100px;
  170.   display: flex;
  171.   justify-content: center;
  172.   border-radius: 8px;
  173. }
  174. .search-input {
  175.   width: 780px;
  176.   border-radius: 8px;
  177.   font-size: 36px;
  178.   font-family: PingFangSC-Regular, PingFang SC;
  179.   font-weight: 400;
  180.   color: #000000;
  181.   margin-left: 40px;
  182.   text-indent: 40px;
  183. }
  184. .index-root-search-image-view-css {
  185.   position: absolute;
  186.   width: 32px;
  187.   height: 32px;
  188.   top: 35px;
  189.   bottom: 35px;
  190.   right: 0;
  191.   margin-right: 102px;
  192.   text-align: center;
  193. }
  194. .index-root-search-flex-view-css {
  195.   display: flex;
  196.   flex-wrap: wrap;
  197.   flex-direction: row;
  198.   width: 1450px;
  199.   margin-left: 245px;
  200.   margin-right: 245px;
  201.   margin-top: 40px;
  202. }
  203. .index-root-search-text-view-css {
  204.   font-size: 30px;
  205.   font-family: PingFangSC-Regular, PingFang SC;
  206.   color: #000000;
  207.   text-align: center;
  208.   font-weight: 400;
  209.   top: 0;
  210.   bottom: 0;
  211.   right: 0;
  212.   position: absolute;
  213.   margin-right: 30px;
  214. }
  215. .index-root-search-title-text-view-css {
  216.   font-size: 70px;
  217.   font-family: PingFangSC-Regular, PingFang SC;
  218.   color: #ffffff;
  219.   text-align: center;
  220.   opacity: 1.0;
  221. }
  222. .search-city-button-view-css {
  223.   width: 270px;
  224.   height: 100px;
  225.   background-color: rgba(0, 0, 0, .1);
  226.   margin-right: 20px;
  227.   margin-top: 40px;
  228.   border-radius: 11px;
  229.   border-width: 2px;
  230.   border-color: rgba(255, 255, 255, 0.1);
  231.   focus-background-color: #fff;
  232. }
  233. .search-city-button-view-css .city-sel-box {
  234.   border-width: 2px;
  235.   border-color: #32C5FF;
  236. }
  237. .icon-location-reactive {
  238.   position: absolute;
  239.   width: 26px;
  240.   height: 34px;
  241.   margin-left: 60px;
  242.   margin-top: 30px;
  243.   margin-bottom: 30px;
  244. }
  245. .icon-location {
  246.   width: 26px;
  247.   height: 34px;
  248.   position: absolute;
  249.   left: 0;
  250.   top: 0;
  251.   z-index: 9;
  252. }
  253. .search-city-hot-text-iew-css {
  254.   width: 270px;
  255.   height: 100px;
  256.   background-color: rgba(50, 197, 255, 0.1);
  257.   border-radius: 11px;
  258.   border: 2px solid #32C5FF;
  259.   font-size: 36px;
  260.   font-family: PingFangSC-Regular, PingFang SC;
  261.   text-align: center;
  262.   color: white;
  263. }
  264. .search-city-empty {
  265.   margin-top: 40px;
  266.   width: 425px;
  267.   display: flex;
  268.   align-items: center;
  269.   justify-content: center;
  270.   flex-direction: column;
  271.   margin-left: 535px;
  272. }
  273. .search-city-empty .icon-no-connect {
  274.   width: 425px;
  275.   height: 307px;
  276. }
  277. .search-city-empty .empty-txt {
  278.   font-size: 32px;
  279.   font-family: PingFangSC-Light, PingFang SC;
  280.   font-weight: 300;
  281.   color: #FFFFFF;
  282.   margin-top: 60px;
  283. }
  284. </style>

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


一文详解Vue+flex布局实现TV端城市列表
一文详解Vue+flex布局实现TV端城市列表



TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-13723.html
站长图库 - 一文详解Vue+flex布局实现TV端城市列表
申明：本文转载于《掘金社区》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐

    PHP采集插件QueryList实践教学

    PHP采集插件QueryList实践教学

    教程 建站教程
    一： 需求背景作为一个开发人员，在日常开发中或多或少多会遇到采集的需求，需要采集某个网站的数据、文章等等，同时在还需要对采集到内容进行解析，...