如何用list組件實現tabbar標題欄

需求描述

當我們不想用tabbar組件實現標題欄時,還有什麼其他選擇麼?

需求分析

答案是list組件,通過list組件設置樣式flex-direction: row;可以滿足橫向展示標題的效果,同時,增加點擊標題時的樣式切換可以滿足動態展示的效果。

假設定義一個數組,用來表示標題內容,該數組的元素需要同時包含標題的名字和點擊的顏色,當我們點擊對應標題時,可以將點擊的標題顏色設置爲紅色,其他未被點擊的標題設置爲黑色。

效果如下(點擊“經濟”和“音樂”標題):

1.png2.png

重點代碼如下:

      <list class="list" for="{{listData}}">
        <list-item class="list-item" type="item">
          <text class="text_{{$item.color}}" onclick="changeColor($idx,$item.color)">{{ $item.name }}</text>
        </list-item>
      </list>

      listData: [
        { color: "black", name: "體育" },
        { color: "black", name: "政治" },
        { color: "black", name: "社會" },
        { color: "black", name: "經濟" },
        { color: "black", name: "文學" },
        { color: "black", name: "音樂" },
        { color: "black", name: "美術" },
        { color: "black", name: "時事" },
      ]

    changeColor: function ($idx, color, evt) {
      if (this.num === $idx) {
        this.listData[$idx].color = "red"
      }
      else {
        this.listData[$idx].color = "red"
        this.listData[this.num].color = "black"
        this.num = $idx
      }
      console.log("changeColor" + $idx);
    }

解決方案

<template>
  <!-- Only one root node is allowed in template. -->
  <div class="container">
    <div>
      <list class="list" for="{{listData}}">
        <list-item class="list-item" type="item">
          <text class="text_{{$item.color}}" onclick="changeColor($idx,$item.color)">{{ $item.name }}</text>
        </list-item>
      </list>
    </div>
  </div>
</template>
<style>
  .list {
    flex-direction: row;
    height: 50px;
  }
  .list-item {
    width: 80px;
    margin-left: 10px;
  }
  .container {
    flex-direction: column;
  }
  .text {
    font-size: 30px;
  }
  .text_red {
    color: #dc143c;
  }
  .text_black {
    color: rgba(0, 0, 0, 0.54);
  }
</style>
<script>
  module.exports = {
    data: {
      num: 0,
      color: '',
      listData: [
        { color: "black", name: "體育" },
        { color: "black", name: "政治" },
        { color: "black", name: "社會" },
        { color: "black", name: "經濟" },
        { color: "black", name: "文學" },
        { color: "black", name: "音樂" },
        { color: "black", name: "美術" },
        { color: "black", name: "時事" },
      ]
    },
    onInit() {
    },
    changeColor: function ($idx, color, evt) {
      if (this.num === $idx) {
        this.listData[$idx].color = "red"
      }
      else {
        this.listData[$idx].color = "red"
        this.listData[this.num].color = "black"
        this.num = $idx
      }
      console.log("changeColor" + $idx);
    }
  }
</script>

欲瞭解更多詳情,請參見:

藍牙接口介紹:

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-bluetooth-0000001074629693

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章