微信小程序tab切換組件

tab

html

<!--components/Tab/tab.wxml-->
<view class="tabs">
    <view class="tabs_title">
        <view
         wx:for="{{tabList}}"
         wx:key="id"
         class="title_item  {{item.isActive?'active':''}}"
         bindtap="handleItemTap"
         data-index="{{index}}"
        >
            {{item.value}}
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

js

// components/Tab/tab.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    tabList:Object
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 獲取索引
      const {index} = e.currentTarget.dataset;
      // 觸發 父組件的事件
      this.triggerEvent("tabsItemChange",{index})
    }
  }
})

css

/* components/Tab/tab.wxss */

.tabs_title{
    background-color: #fff;
    display: flex;
    font-size: 28rpx;
    padding: 0 20rpx;
}
.title_item{
    color: #999;
    padding: 15rpx 0;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}
.active{
    color:#ED8137;
    border-bottom: 5rpx solid #ED8137;
}

 

上面的代碼是組件里的代碼

 

下面是使用組件

json頁面調用組件

{
  "usingComponents": {
    "Tab":"../../components/Tab/tab" //組件路徑
  }
}

HTML

<Tab tabList="{{tabList}}" bindtabsItemChange="tabsItemChange">
//這里是頁面內容
</Tab>

js

Page({
  data: {
    tabList:[
      {
        id:0,
        value:'全部訂單',
        isActive:true
      },
      
      {
        id:1,
        value:'待支付',
        isActive:false
      },
      {
        id:2,
        value:'待接單',
        isActive:false
      },
      {
        id:3,
        value:'進行中',
        isActive:false
      },
      {
        id:4,
        value:'已完成',
        isActive:false
      },
      {
        id:5,
        value:'已取消',
        isActive:false
      },
    ],
  },// 根據標題索引來激活選中 標題數組
   changeTitleByIndex(index){
    let {tabList}=this.data
    tabList.forEach((v,i) => i===index? v.isActive = true:v.isActive = false);
    this.setData({
      tabList
    })
  },
  tabsItemChange(e){
    // 1 獲取被點擊的標題索引
    const {index}=e.detail
    this.changeTitleByIndex(index)
  },