搜索
首页web前端Vue.js一文详解Vue+flex布局实现TV端城市列表

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

藏色散人
藏色散人
Jan 20, 2023 pm 02:33 PM
vueflex

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

Vue利用flex布局实现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">
  <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.城市列表布局代码：

ed76d99cadb54934987ccda60213aaab
  d6742aa8100a6a3b19dbdf5cde037991
    749714ddfb4ec5038e2e50724dac60ce
      735b094dcf8a1672f3afdb0f768b9e06
      452857a82653e215279b047c3a6aa938
    16b28748ea4df4d9c2150843fecfba68
    5dac3396ba0354581e28393488b4f440{{item.cityName}}54bdf357c58b8a65c66d7c19c8e4d114
  16b28748ea4df4d9c2150843fecfba68

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"

af9547faf23048e844d45e2fa2140ce2
          749714ddfb4ec5038e2e50724dac60ce
            735b094dcf8a1672f3afdb0f768b9e06
            452857a82653e215279b047c3a6aa938
 16b28748ea4df4d9c2150843fecfba68

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

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

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

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

7182f30b05feb26ec3ab534b56e62568{{item.cityName}}54bdf357c58b8a65c66d7c19c8e4d114

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

d477f9ce7bf77f53fbcf36bec1b69b7a
  3188cbc7d2d3bb3e54e713eef311fa3c
    c806336d6f61ed19bd258787fcab10c3
    2f3e5b401fb4e7135a484d1b38d5d4d6
      ecdbf62b6524d6ee2049d0892c073998
        3241bf6c8876cbe83cfd7ad00e828023 {{ searchTitle }}54bdf357c58b8a65c66d7c19c8e4d114
      16b28748ea4df4d9c2150843fecfba68
      d57563c3c0a2108382a48b2a2601d3eb
        6d6fa9f771abd9dc02f6432910521e9d
        95bad0eab376e1a654936cdecd62582a
        2eea58a91ac3f35c8448bff8ac6a0eb6{{searchDefaultKeyWord}}54bdf357c58b8a65c66d7c19c8e4d114
      16b28748ea4df4d9c2150843fecfba68
      ed76d99cadb54934987ccda60213aaab
        af9547faf23048e844d45e2fa2140ce2
          749714ddfb4ec5038e2e50724dac60ce
            735b094dcf8a1672f3afdb0f768b9e06
            452857a82653e215279b047c3a6aa938
          16b28748ea4df4d9c2150843fecfba68
          4966c637266cce0047a6321ffb136bb0{{item.cityName}}54bdf357c58b8a65c66d7c19c8e4d114
        16b28748ea4df4d9c2150843fecfba68
        a0a3bd37757be4357f891700ad586de2
          14846d41cbada1c0e6a79cfba95a00ed
          533eb01aae17dc6078a1db4d83fc8b04没有搜索结果~94b3e26ee717c64999d7867364b1b4a3
        16b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    6b2e212b95b5817536ecd71178db64c8
  16b28748ea4df4d9c2150843fecfba6821c97d3a051048b8e55e3c8f199a54b23f1c4e4b6b16bbbd69b2ee476dc4f83aimport 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 = "";
    },
  }
}2cacc6d41bbb37262a98f745aa00fbf0c977fa5678fe78cf54b097005108eb8c.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;
}531ac245ce3e4fe3d50054a55f265927

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

image.png

image.png

相关推荐：vuejs视频教程

以上是一文详解Vue+flex布局实现TV端城市列表的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文转载于：juejin。如有侵权，请联系admin@php.cn删除
相关文章
React和Netflix：探索关系React和Netflix：探索关系Apr 26, 2025 am 12:11 AM

Netflix使用React来提升用户体验。1)React的组件化特性帮助Netflix将复杂UI拆分成可管理模块。2)虚拟DOM优化了UI更新，提高了性能。3)结合Redux和GraphQL，Netflix高效管理应用状态和数据流动。

vue.js vs.后端框架：澄清区别vue.js vs.后端框架：澄清区别Apr 25, 2025 am 12:05 AM

Vue.js是前端框架，后端框架用于处理服务器端逻辑。1)Vue.js专注于构建用户界面，通过组件化和响应式数据绑定简化开发。2)后端框架如Express、Django处理HTTP请求、数据库操作和业务逻辑，运行在服务器上。

vue.js和前端堆栈：了解连接vue.js和前端堆栈：了解连接Apr 24, 2025 am 12:19 AM

Vue.js与前端技术栈紧密集成，提升开发效率和用户体验。1)构建工具：与Webpack、Rollup集成，实现模块化开发。2)状态管理：与Vuex集成，管理复杂应用状态。3)路由：与VueRouter集成，实现单页面应用路由。4)CSS预处理器：支持Sass、Less，提升样式开发效率。

Netflix：探索React（或其他框架）的使用Netflix：探索React（或其他框架）的使用Apr 23, 2025 am 12:02 AM

Netflix选择React来构建其用户界面，因为React的组件化设计和虚拟DOM机制能够高效处理复杂界面和频繁更新。1）组件化设计让Netflix将界面分解成可管理的小组件，提高了开发效率和代码可维护性。2）虚拟DOM机制通过最小化DOM操作，确保了Netflix用户界面的流畅性和高性能。

vue.js和前端：深入研究框架vue.js和前端：深入研究框架Apr 22, 2025 am 12:04 AM

Vue.js被开发者喜爱因为它易于上手且功能强大。1)其响应式数据绑定系统自动更新视图。2)组件系统提高了代码的可重用性和可维护性。3)计算属性和侦听器增强了代码的可读性和性能。4)使用VueDevtools和检查控制台错误是常见的调试技巧。5)性能优化包括使用key属性、计算属性和keep-alive组件。6)最佳实践包括清晰的组件命名、使用单文件组件和合理使用生命周期钩子。

vue.js在前端的力量：关键特征和好处vue.js在前端的力量：关键特征和好处Apr 21, 2025 am 12:07 AM

Vue.js是一个渐进式的JavaScript框架，适用于构建高效、可维护的前端应用。其关键特性包括：1.响应式数据绑定，2.组件化开发，3.虚拟DOM。通过这些特性，Vue.js简化了开发过程，提高了应用性能和可维护性，使其在现代Web开发中备受欢迎。

vue.js比反应好吗？vue.js比反应好吗？Apr 20, 2025 am 12:05 AM

Vue.js和React各有优劣，选择取决于项目需求和团队情况。1)Vue.js适合小型项目和初学者，因其简洁和易上手；2)React适用于大型项目和复杂UI，因其丰富的生态系统和组件化设计。

vue.js的功能：增强前端的用户体验vue.js的功能：增强前端的用户体验Apr 19, 2025 am 12:13 AM

Vue.js通过多种功能提升用户体验：1.响应式系统实现数据即时反馈；2.组件化开发提高代码复用性；3.VueRouter提供平滑导航；4.动态数据绑定和过渡动画增强交互效果；5.错误处理机制确保用户反馈；6.性能优化和最佳实践提升应用性能。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
4 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
3 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
4 周前ByDDD
<🎜>：死铁路 - 如何完成所有挑战
1 个月前ByDDD
如何修复KB5055523无法在Windows 11中安装？
2 周前ByDDD
显示更多

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小，语法高亮，不支持代码提示功能

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

显示更多

热门话题

gmail邮箱登陆入口在哪里
7739
15
Java教程
1643
14
CakePHP 教程
1397
52
Laravel 教程
1290
25
PHP教程
1233
29
显示更多