微信小程序开发 | 03 - 编写Tab选项卡（自定义组件）

Posted 2021-05-29 Mculover666

一、代码

新建自定义组件Tabs：

wxml代码

<!--components/Tabs/Tabs.wxml-->

<view class="tabs">
  <view class="tabs_title" >
    <view 
      wx:for="{{tabs}}"
      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>

wxss代码

/* components/Tabs/Tabs.wxss */

.tabs {}

.tabs_title {
  display: flex;
}

.title_item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15rpx 0;
  flex:1;
  font-size: 12px;
}

.active {
  color: red;
  border-bottom: 5rpx solid red;
}

.tabs_content {
}

js代码

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    //点击事件
    handleItemTap(e){
      // 1. 获取点击的索引
      const {index} = e.currentTarget.dataset;

      // 2. 触发父组件中的事件
      this.triggerEvent("tabsItemChange",{index});
    }
  }
})

json代码

{
  "component": true,
  "usingComponents": {}
}

二、使用

1. 设置路径

在index.json中（根据实际组件存放路径设置）：

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

2. 创建组件

<!--index.wxml-->

<!--监听自定义事件-->
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
  <block wx:if="{{tabs[0].isActive}}">0</block>
  <block wx:elif="{{tabs[1].isActive}}">1</block>
  <block wx:elif="{{tabs[2].isActive}}">2</block>
</Tabs>

3. 编写js代码

首先在data中创建一个tabs数组用于存放选项卡选项数据：

  data: {
    //选项卡选项
    tabs:[
      {
        id:0,
        value:"手工制作",
        isActive:true
      },
      {
        id:1,
        value:"绘画书法",
        isActive:false
      },
      {
        id:2,
        value:"证书展示",
        isActive:false
      }
    ]
  },

然后编写Tabs自定义组件的事件处理函数，刷新tabs数组中的是否激活选项：

/* 标题点击事件 */
handleTabsItemChange(e){
  //1 获取被点击的标题索引
  const {index} = e.detail;

  //2. 修改源数组
  let {tabs} = this.data;
  tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
  //3. 赋值到data中
  this.setData({
    tabs
  });
},

三、效果