登录  /  注册
首页 > web前端 > Vue.js > 正文

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

藏色散人
发布： 2023-01-20 14:33:24
转载
1420人浏览过

本篇文章给大家带来了关于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" alt="一文详解Vue+flex布局实现TV端城市列表" >
  <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.城市列表获取焦点的事件：

主要是在div设置: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.设置焦点背景颜色和字体效果：

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

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

焦点效果的样式：: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.搜索框输入事件：

//输入内容之后请求城市列表接口刷新数据
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.完整代码如下：

<template>
  <div class="index-root-search-view-css" :clipChildren="false">
    <img  class="search-background-view-css" :src="searchImageData"/ alt="一文详解Vue+flex布局实现TV端城市列表" >
    <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" alt="一文详解Vue+flex布局实现TV端城市列表" >
        <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">没有搜索结果~</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 &#39;@/views/contsants&#39;;import {ESLaunchManager} from "@extscreen/es-core";export default {
  name: "city_list",
  props: {
    searchKeyWord: {
      type: String,
      default: &#39;&#39;,
    },
    focusTextColor: {
      type: String,
      default: &#39;#000000&#39;
    },
    focusHotTextColor: {
      type: String,
      default: &#39;#00EFFF&#39;
    },
    textColor: {
      type: String,
      default: &#39;#FFFFFF&#39;
    },
    textFontSize: {
      type: String,
      default: &#39;30px&#39;
    },
    textFontWeight: {
      type: Number,
      default: 400
    },
    focusBackground: {
      orientation: &#39;TL_BR&#39;,//TOP_BOTTOM,TR_BL, RIGHT_LEFT, BR_TL, BOTTOM_TOP,BL_TR,LEFT_RIGHT,TL_BR,
      cornerRadius: [40, 40, 40, 40],
      normal: [&#39;#00000000&#39;, &#39;#00000000&#39;],
      focused: [&#39;#F5F5F5&#39;, &#39;#F5F5F5&#39;],
    },
  },
  data() {
    return {
      pageLoading: false,
      text: &#39;search city&#39;,
      search: &#39;&#39;,
      searchIcon: searchImage,
      searchImageData: searchBackGroundImage,
      searchTitle: "切换城市",
      searchDefaultKeyWord: &#39;搜索&#39;,
      searchDefault: &#39;请输入城市名称首字母或全拼&#39;,
      focusColor: &#39;#f5f5f5&#39;,
      citySearchResult: "",
      hotCity: [],
      cityName: "",
      cityId: "",
      showHot: true,
      params: &#39;&#39;,
    }
  },
  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 = "";
    },
  }
}</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.实现的效果截图如下：

image.png

image.png

相关推荐：vuejs视频教程

以上就是一文详解Vue+flex布局实现TV端城市列表的详细内容，更多请关注php中文网其它相关文章！

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
相关标签：
vue
来源：juejin网
收藏 点赞
上一篇：一文浅析Vue中单文件组件 下一篇：一文聊聊vue怎么阻止重复请求
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪？ 课件
凡人来自于2024-04-16 10:10:18
0 0 41
PX自动转换为REM错误  <style>html {   font-size: calc(100vw / 3.75);      }...
凡人来自于2024-04-16 09:34:16
0 0 138
PHP数组从URL参数中获取的行为不如预期 我有一个包含类别ID的URL参数，我想将其视为一个数组，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它从URL参数获取数组：$catI...
P粉785905797来自于2024-04-06 22:09:02
0 1 377
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
P粉738046172来自于2024-04-06 22:01:35
0 2 274
我应该在 apache 中哪里放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用运行状况检查url登录访问日志。基于此链接，他们提到了有关修改Customlog指令的信息。我不是关于需要更改Cust...
P粉573809727来自于2024-04-06 22:03:59
0 1 400
返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
P粉757556355来自于2024-04-06 21:55:20
0 1 235
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
P粉771233336来自于2024-04-06 21:58:04
0 1 328
如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
P粉970736384来自于2024-04-06 21:28:37
0 1 1832
将将类的私有成员设置为构造函数参数 classFoo{#one#two#three#four#five#six#seven#eight#nine#ten#eleven#twelve#thirteen#fourteen...
P粉761718546来自于2024-04-06 21:48:47
0 1 241
如何从结果集中仅显示最低值（MYSQL） 我有以下声明：selectDATE(recieved_on)asDay,round(count(*)/24)AS'average'frommessagewherefacilityi...
P粉338969567来自于2024-04-06 21:44:19
0 1 221
相关专题
更多>
热门推荐
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部