How to implement tabbar title bar with list component

Requirements describe

When we don't want to use tabbar When the component implements the title bar , Are there any other options ？

Demand analysis

The answer is list Components , adopt list Component setting style flex-direction: row; It can meet the effect of horizontal display title , meanwhile , Adding style switching when clicking on the title can meet the effect of dynamic display .

Suppose you define an array , Used to indicate the content of the title , The elements of the array need to contain both the name of the title and the color of the click , When we click on the corresponding title , You can set the color of the clicked title to red , Other UN clicked titles are set to black .

The effect is as follows （ Click on “ economic ” and “ music ” title ）：

The key codes are as follows ：

      <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: " sports " },
        { color: "black", name: " Politics " },
        { color: "black", name: " social " },
        { color: "black", name: " economic " },
        { color: "black", name: " literature " },
        { color: "black", name: " music " },
        { color: "black", name: " The fine arts " },
        { color: "black", name: " current affairs " },
      ]

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

Solution

<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: " sports " },
        { color: "black", name: " Politics " },
        { color: "black", name: " social " },
        { color: "black", name: " economic " },
        { color: "black", name: " literature " },
        { color: "black", name: " music " },
        { color: "black", name: " The fine arts " },
        { color: "black", name: " current affairs " },
      ]
    },
    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>

For more details , Please see the ：

Introduction to Bluetooth interface ：

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