Ein Artikel, in dem das Vue+Flex-Layout zur Implementierung der TV-End-Stadtliste ausführlich erläutert wird

Dieser Artikel vermittelt Ihnen relevantes Wissen über das Vue-Layout. Er fasst hauptsächlich zusammen und stellt vor, wie Vue den TV-seitigen Stadtlisteneffekt erzielt. Ich hoffe, dass dies der Fall ist Helfen Sie, wenn Sie es brauchen.

Vue verwendet Flex-Layout, um Städtelisten im Fernsehen zu implementieren.

Stadtlisten und -suchen sind in Vue weit verbreitet. In diesem Blog wird erläutert, wie Such- und Städtelisten implementiert werden:

<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. Fokus:

Hauptsächlich festgelegt in div: focusable="true" und @focus="onFocus"

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

6. Fokus-Hintergrundfarbe und Schrifteffekt festlegen:

Hauptsächlich festgelegt: doubleParentState="true", wenn der Text erhält Die Farbe wird nicht durch das übergeordnete Layout beeinflusst. Sie können auch die Fokusvergrößerung und Randeffekte festlegen: :style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}

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

7. Suchfeld-Eingabeereignis:

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

9. Die TV-Softtastatur wird standardmäßig angezeigt:

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

10 folgt:

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

11 Der Screenshot des erzielten Effekts ist wie folgt:

Verwandte Empfehlungen: vuejs Video-Tutorial

Das obige ist der detaillierte Inhalt vonEin Artikel, in dem das Vue+Flex-Layout zur Implementierung der TV-End-Stadtliste ausführlich erläutert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!