简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  一文詳解Vue+flex佈局實現TV端城市列表

一文詳解Vue+flex佈局實現TV端城市列表

藏色散人
藏色散人轉載
2023-01-20 14:33:241669瀏覽

這篇文章為大家帶來了關於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>
  <div>
    <div>
      <img  alt="一文詳解Vue+flex佈局實現TV端城市列表" >
      <img  alt="一文詳解Vue+flex佈局實現TV端城市列表" >
    </div>
    <span>{{item.cityName}}</span>
  </div>
<p><strong>4.城市清單css樣式代碼：</strong></p>
<pre class="brush:php;toolbar:false">.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>
          <div>
            <img  alt="一文詳解Vue+flex佈局實現TV端城市列表" >
            <img  alt="一文詳解Vue+flex佈局實現TV端城市列表" >
 </div>
<p><strong>6.設定焦點背景顏色和字體效果：</strong></p>
<p>主要是設定:duplicateParentState="true"當文字獲得焦點時顏色不受父佈局影響，還可以設定焦點放大和帶邊框效果</p>
<pre class="brush:php;toolbar:false">:enableFocusBorder="true"//设置获得焦点时的边框
:focusScale="1.0"//设置焦点放大时的倍数

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

<span>{{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.完整程式碼如下： 

<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>

11.實現的效果截圖如下：

一文詳解Vue+flex佈局實現TV端城市列表

一文詳解Vue+flex佈局實現TV端城市列表

#相關推薦：vuejs影片教學

#

以上是一文詳解Vue+flex佈局實現TV端城市列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文轉載於：juejin.im。如有侵權，請聯絡admin@php.cn刪除
上一篇：一文淺析Vue中單一檔案元件下一篇：一文淺析Vue中單一檔案元件

相關文章

看更多