使用自定義元件的方式來構建頁面，不是小程式自帶的元件

1、建立自定義元件

類似於頁面也是由 wxml，js，json，css 四個頁面組成，一般放在專門的資料夾中

檔案內容

2、在json 檔案中引用自定義元件

3、編寫自定義元件

將標題靈活話，通過迴圈方式賦值

4、實現點選不同標題樣式隨之改變

其中獲取data 資料中的不同寫法

 解構對複雜型別進行解構時，複製一份變數引用
 let tabs 
 
= this.data.tabs; 相當於   let {tabs} = this.data; 
 最嚴謹的做法，重新拷貝一份陣列，再對這個陣列的備份進行處理，不要直接修改this.data 資料
 let tabs = JSON.parse(JSON.stringify(this.data.tabs));
     
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      let {tabs} = this.data;
      //let tabs = this.data.tabs;

自定義元件小小程式碼：

wxml中

<!-- 自定義元件主要分為 標題和內容 -->
<view class="tabs">
  <view class="tabs_title">
    <!-- <view class="title_item active" >首頁</view>
    <view class="title_item">分類</view>
    <view class="title_item">本地</view>
    <view class="title_item">關於</view> -->
<!-- 通過迴圈的方式實現 
wx:
 
for ="{{陣列名}}" 
wx:key ="id關鍵字" 
//判斷是否為真
class="title_item {{item.isActive?'active':'true'}}"
-->
<view wx:for ="{{tabs}}" wx:key ="id" 
  class="title_item {{item.isActive?'active':'true'}}"
  bindtap="hanldeItemTap"
  data-index ="{{index}}"
>
{{item.name}}

</view>

  </view>
<view class="tabs_conent">內容</view>
</view>

wxss 中

/* 設定元件樣式
  display: flex;  變成伸縮盒子
  justify-content: center; 文字水平對齊
  align-items: center;  垂直對齊
  border-bottom: 10rpx solid currentColor;  文字下劃線
  flex 讓所有彈性盒模型物件的子元素都有相同的長度，並且忽略其內部的內容
*/
.tabs{}
.tabs_title{
  
  display: flex;
  padding: 10rpx;
}
.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color: red;
  border-bottom: 10rpx solid currentColor;
}
.tabs_conent{}

js 中

// component/Tabs/Tabs.js
Component({

  /**
   * 元件的初始資料
   */
  data: {
    tabs :[
      {
        id : 0,
        name : "首頁",
        isActive : true
      },
      {
        id : 1,
        name : "分類",
        isActive : false
      },
      {
        id : 2,
        name : "本地",
        isActive : false
      },
      {
        id : 3,
        name : "關於",
        isActive : false
      }

    ]

  },

  /**
   * 存放事件回撥函式 頁面js 與元件js 的區別?
   *  1、頁面 .js 檔案中存放事件回撥函式的時候存放data 同級下！！
   *  2、元件 .js 檔案中存放事件回撥函式的時候必須放在methods(元件方法列表)
   */

  methods: {
    /*
     實現點選標題樣式改變
     1、在methods 中繫結點選時間
     2、獲取被點選標題的索引
     3、獲取原陣列
     4、對陣列迴圈，給每一個迴圈性選中屬性改為false,將當前索引項改為true
    
    */

    hanldeItemTap(e){
      //  console.log(e);   通過列印獲取index 得知 dataset 含有index
      //獲取索引
      const {index} = e.currentTarget.dataset;
      //獲取data 中陣列
      /*
      解構對複雜型別進行解構時，複製一份變數引用
      let tabs = this.data.tabs; 相當於   let {tabs} = this.data; 
    最嚴謹的做法，重新拷貝一份陣列，再對這個陣列的備份進行處理，不要直接修改this.data 資料
    let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      */
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      let {tabs} = this.data;
      //let tabs = this.data.tabs;
      //迴圈陣列 [].forEach遍歷陣列時修改 v 也會修改源陣列
      tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      //把值重新丟回去
      this.setData({
        tabs
      })
        
    },

    ahanldeItemTap(e){
      //  console.log(e);   通過列印獲取index 得知 dataset 含有index
      //獲取索引
      const {index} = e.currentTarget.dataset;
      //獲取data 中陣列
      /*
      解構對複雜型別進行解構時，複製一份變數引用
      let tabs = this.data.tabs; 相當於   let {tabs} = this.data; 
    最嚴謹的做法，重新拷貝一份陣列，再對這個陣列的備份進行處理，不要直接修改this.data 資料
    let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      */
      //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      let {atabs} = this.data;
      //let tabs = this.data.tabs;
      //迴圈陣列 [].forEach遍歷陣列時修改 v 也會修改源陣列
      atabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
      //把值重新丟回去
      this.setData({
        atabs
      })
        
    }
  }
})

官方文件