Un article expliquant en détail la disposition Vue+flex pour implémenter la liste des villes de fin de télévision

Cet article vous apporte des connaissances pertinentes sur la mise en page Vue. Il résume et présente principalement comment Vue utilise la mise en page flexible pour obtenir l'effet de liste de villes côté TV. Jetons-y un coup d'œil ensemble. aidez-vous si vous en avez besoin.

Vue utilise la mise en page flexible pour implémenter la liste des villes à la télévision

La liste des villes et la recherche sont très courantes dans Vue. Ce blog expliquera comment implémenter la recherche et la liste des villes

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 lazy"  src="/static/imghw/default1.png"  data-src="searchIcon"   : alt="Un article expliquant en détail la disposition Vue+flex pour implémenter la liste des villes de fin de télévision" >
  <span class="index-root-search-text-view-css" ref="textViewCity">{{searchDefaultKeyWord}}</span>
</div>

2. Code de style CSS de la mise en page de recherche :

.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. Code de mise en page de la liste des villes :

<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 class="icon-location lazy"  src="/static/imghw/default1.png"  data-src="@/assets/location.png"   alt=""  showOnState="normal">
      <img class="icon-location lazy"  src="/static/imghw/default1.png"  data-src="@/assets/location_hot_focus.png"   alt=""  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. focus :

Principalement défini dans div : focusable="true" et @focus="onFocus"

.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;
}

6 Définir la couleur d'arrière-plan du focus et l'effet de police :

Principalement défini : duplicateParentState="true" lorsque le texte. obtient La couleur n'est pas affectée par la mise en page parent lorsque le focus est activé. Vous pouvez également définir le grossissement du focus et les effets de bordure

<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 class="icon-location lazy"  src="/static/imghw/default1.png"  data-src="@/assets/location.png"   alt=""  showOnState="normal">
            <img class="icon-location lazy"  src="/static/imghw/default1.png"  data-src="@/assets/location_hot_focus.png"   alt=""  showOnState="focused">
 </div>

Style d'effet de focus : :style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}.

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

7. Événement d'entrée dans la zone de recherche :

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

8. Événement de focus dans la zone de recherche :

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

9. Le clavier logiciel du téléviseur apparaît par défaut :

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

10. suit :

mounted() {
  this.hotCity = hotCity;
  this.showHot = true;
  this.pageLoading = true
  //弹出软键盘
  this.$refs.searchInput.focus()
  //搜索框默认获取焦点
  this.setHideLoading()
},

11. La capture d'écran de l'effet obtenu est la suivante :

Recommandations associées :

tutoriel vidéo vuejs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!