【微信小程序---标题激活选中流程】

想要实现效果

 自定义组件样式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.name}}
		</view>

	</view>
	<view class="tabs_content">内容</view>
</view>

•  bindtap=“handleItemTap” 绑定view盒子点击事件 然后Tab.js接收这个handleItemTap

自定义组件样式components>Tabs>Tabs.wxss 

/* .tabs{} */
.tabs_title{
    display: flex;
    padding: 10rpx 0;
}
.title_item{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.active{
    color: red;
    border-bottom: 5px solid currentColor;
}
/* .tabs_content{} */

 自定义组件样式components>Tabs>Tabs.js

// components/Tabs/Tabs.js
Component({
  properties: {
    // 这里面是用来接收父向子传递的数据

  },
  /* 组件的初始数据*/
  data: {
    tabs: [
      {
        id: 0,
        name: "首页",
        isActive: true
      },
      {
        id: 1,
        name: "原创",
        isActive: false
      },
      {
        id: 2,
        name: "分类",
        isActive: false
      },
      {
        id: 3,
        name: "关于",
        isActive: false
      }
    ]
  },
  /**
   * demo.js 里面的函数反应事件在data并齐使用
   * 组件是在methods里面使用
   */
  methods: {
    handleItemTap(e) {
      const { index } = e.currentTarget.dataset;
      let { tabs } = this.data;
      tabs.forEach(
        (v, i) => i === index ? v.isActive =
          true : v.isActive = false
      );
      this.setData({
        tabs
      })
    }
  }
})

这里的 

let {tabs}=this.data; 相当于 let tabs=this.data.tabs;

• 绑定点击事件bindtap接收在mthods：{里面编辑}
• 获取tab_title里面item的索引值index 可以通过console.log(e);查找输出的index的位置在e.currentTaget.dataset里面
• tabs.forEach 循环遍历数组tabs里面的item [].forEach遍历数组的时候 修改了v 也会导致数组被修改  所以这里要用最严谨的做法就是深度拷贝数组 ，这里的tabs.forEach就相当于 this.data.tabs
• 深度拷贝数组，不要直接修改this.data.数据  但是这里不这样做也可以，如果严谨角度出发这里应该这样修改 let tabs=JSON.parse（JSON.stringfy(this.tabs.data));