• Vue利用flex布局实现TV端城市列表


    Vue利用flex布局实现TV端城市列表

    vue中城市列表和搜索很常见,这篇博客就来说说咋实现搜索和城市列表

    1.实现搜索布局代码:

    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.城市列表布局代码:

     
             
      {{item.cityName}}

    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"

           
                       

    6.设置焦点背景颜色和字体效果:

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

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

    焦点效果的样式::style="{focusColor: focusHotTextColor,fontSize: textFontSize,fontWeight: textFontWeight,}

    {{item.cityName}}

    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.完整代码如下:

    11.实现的效果截图如下:

     

  • 相关阅读:
    hyoerf手记
    听GPT 讲Rust源代码--library/std(8)
    应急启动电源+充气一体式方案设计
    RetinaNet-Obj
    数据库高级 V
    GoLong的学习之路(二十一)进阶,语法之并发(go最重要的特点)(协程的主要用法)
    2023-09-11工作错题集:绝了!BigDecimal计算百分数保留2位小数
    keycloak~时间不正确的问题
    50 二叉树中的最大路径和
    Windows FFmpeg安装
  • 原文地址:https://blog.csdn.net/u012556114/article/details/127722353