封装组件微信小程序Tabar

wxml部分

<view class="tabs">
    <view class="tabs_header">
    <!-- 注释这部分 从data加载header -->
        <!-- <view class="active">首页</view>
        <view>原创</view>
        <view>分类</view>
        <view>关于</view> -->
        <!-- 循环列表从data渲染 -->
        <view wx:for="{{tabs}}" wx:key='id' 
        class="{{item.isActive ? 'active':''}}" 
        bindtap='handleItemTap'
        data-op='{{index}}'>
            {{item.name}}
        </view>
    </view>
    <!-- data-op='{{index}}'是自定义的，index是wx:for循环里面的index
    <view class="tabs_content">
        内容
    </view>
</view>

css（less写的）部分

.tabs_header {
    height: 60rpx;
    padding: 15rpx;
    display: flex;

    view {
        // width: 60rpx;
        padding-right: 5px;
        border-right: 1px solid blanchedalmond;
        background-color: #ccc0;
        display        : flex;
        flex           : 1;
        justify-content: center;
        align-items    : center;
    }
    .active{
        color: orange;
        border-bottom: 5px solid currentColor;
    }
}

js(data数据)

/**
   * 组件的初始数据
   */
  data: {
    tabs: [
      {
        id: 0,
        name: "首页",
        isActive: true
      },
      {
        id: 1,
        name: "原创",
        isActive: false
      },
      {
        id: 2,
        name: "分类",
        isActive: false
      },
      {
        id: 3,
        name: "关于",
        isActive: false
      }
    ]
  },
  **
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e) {
      console.log(e);
      //  -> 获取被点击的索引
      let {index} = e.currentTarget.dataset.op
      console.log(index);
      // -> 获取原数组    
      let { tabs } = this.data
      //解构赋值(拷贝)相当于 let tabs=this.data
      console.log(tabs);
      //  ->给每一个循环选择中的属性改为true
      tabs.forEach((item, i) => {
        i == index ? item.isActive = true : item.isActive = false
        this.setData({
          tabs
        })
      });
    }

  },
})