脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue实现TV端城市列表

Vue如何利用flex布局实现TV端城市列表功能

 更新时间：2023年01月03日 15:35:42   作者：一笑的小酒馆  
用vue开发了三四个组件了,都是H5的,现在来看看PC是如何玩转组件的,下面这篇文章主要给大家介绍了关于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.城市列表布局代码：

<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"/>
    <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">
        <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 '@/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 = "";
    },
  }
}
</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.实现的效果截图如下：

总结

到此这篇关于Vue如何利用flex布局实现TV端城市列表功能的文章就介绍到这了,更多相关Vue实现TV端城市列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue百度地图修改折线颜色,添加icon和文字标注方式

    vue百度地图修改折线颜色,添加icon和文字标注方式

    这篇文章主要介绍了vue百度地图修改折线颜色,添加icon和文字标注方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Jenkins Sidebar Link插件实现添加侧边栏功能详解

    Jenkins Sidebar Link插件实现添加侧边栏功能详解

    这篇文章主要介绍了vue框架实现添加侧边栏，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • vue中echarts的用法及与elementui-select的协同绑定操作

    vue中echarts的用法及与elementui-select的协同绑定操作

    这篇文章主要介绍了vue中echarts的用法及与elementui-select的协同绑定操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vuedraggable实现拖拽功能

    vuedraggable实现拖拽功能

    这篇文章主要为大家详细介绍了vuedraggable实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue中组件的name属性含义和用法示例

    vue中组件的name属性含义和用法示例

    组件是有name属性的,匹配的就是组件的name,下面这篇文章主要给大家介绍了关于vue中组件的name属性含义和用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue中echarts视图不更新问题及解决

    vue中echarts视图不更新问题及解决

    这篇文章主要介绍了vue中echarts视图不更新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • 关于vue3.0使用axios报错问题

    关于vue3.0使用axios报错问题

    这篇文章主要介绍了vue3.0使用axios报错问题记录,vue-cli3.0安装插件的时候要注意区分vue-cli2.0的命令，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08
  • vuex中的state、getters、mutations、actions之间的关系解读

    vuex中的state、getters、mutations、actions之间的关系解读

    这篇文章主要介绍了vuex中的state、getters、mutations、actions之间的关系,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue实现下拉加载更多

    Vue实现下拉加载更多

    这篇文章主要为大家详细介绍了Vue实现下拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-05-05
  • echarts设置tootip轮播切换展示(vue3搭配vue-echarts粘贴即用)

    echarts设置tootip轮播切换展示(vue3搭配vue-echarts粘贴即用)

    这篇文章主要为大家介绍了echarts设置tootip轮播切换展示效果,vue3搭配vue-echarts粘贴即用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2023-10-10

最新评论