微信小程序里tab栏切换效果带滑动，封装为组件来使用

用到两个组件:s-tabs组件和tab_item组件
组件定义；定义一个目录后，直接右键该目录创建Component
1:s-tabs组件

<!-- s-tabs组件 js未用到,json默认会开启"component": truee -->
<view class='tab_tab'>
  <!-- 定义一个组件，放一个插槽是为了能在引入该组件的页面可以放东西,包括其他组件；当然；最好用一个view包裹你要放的所有东西 -->
  <slot>
  </slot>

</view>

.tab_tab {
  height: 70rpx;
  display: flex;
  justify-content: space-around;
  background-color: white;
  margin-bottom: 1rpx;
    line-height: 70rpx;
}

2.tab_item组件

<!-- 每一个tab选项 进行中,已结算 -->
<view  class='{{item_key==current_key?"tab_border":""}}' bindtap='item_change'>
  {{title}}
</view>

/* 线条颜色*/
.tab_border {
  border-bottom: 1rpx solid green;
  height: 100%;
}

properties: {
    title:{
      type:String,
      value:''
    },
    item_key:{      // 这个肯定固定的都有了；生成的时候直接带；跟title一样 相当于创了两组,item_key在view上
      type:String,
      value:'',
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 一会把默认的第一个key传过来  通过被使用页面的onLoad传
    current_key:'',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 当我点击的时候，我把事先创好的item_key再传到子组件那来控制轮播
    item_change(e){
      var that = this
      var cc = { son: that.properties.item_key}
      this.triggerEvent('getSon',cc)
      
    },
    // 
    getKey(key){	// 轮播图变得时候，那个页面直接调用它来更改current_key即当前key
      console.log(key)
      console.log(this.properties.item_key)
        this.setData({
          current_key:key
        })
    }
  }

3.使用页面:angentRecord.wxml

	<s-tabs>
  <!-- 因为s-tabs组件里定义了一个slot，所以这里才能写东西； block充当了一个包裹所有slot的内容 -->
  <block wx:for="{{tab}}">
    <!-- 标签的索引 -->
    <!-- 在这里我把每一项的key传过去，轮播的时候，我再把轮播的具体的key传过去,类名就比较这两个key；相等则添加 不要试图再通过自定义属性拿；这是组件名；没用-->
    <tab_item id="tab_item" bindgetSon="getSon" title="{{item.status}}" tab="{{tab}}"  item_key="{{item.key}}"> </tab_item>
  </block>
</s-tabs>
<view class='tab_swiper'>
  <swiper current="{{index}}" bindchange="swiperChange">
    <swiper-item wx:for="{{tab}}">
      <view wx:if="{{index==0}}">
          第一个轮播的内容样式等自定义
      </view>
      <view wx:if="{{index==1}}">
          第二个轮播的内容样式自定义
      </view>
      <!-- 有一个轮播无数据就展示这个 -->
      <!-- <view class='box' wx:if="{{item.content.length==0}}">
        <image class='img' src='http://etc-app.oss-cn-beijing.aliyuncs.com/image_201905141104052588.png' mode='widthFix'></image>
        <text class='ttt'>暂无邀请</text>
        <view class='liji' bindtap='angentShare'>立即邀请</view>
      </view> -->
    </swiper-item>
  </swiper>
</view>

swiper {
  height: 536rpx;
  background-color: white;
  margin-top: 1rpx;
}

{
  "usingComponents": {
    "s-tabs":"../../component/s-tabs/s-tabs",
    "tab_item":"../../component/tab_item/tab_item"
  }
}

data: {
    index:0,			//控制轮播
    tab: [{
        status: '进行中',
        key:'tab1',
      content: [       // 轮播展示内容  模拟后台数据
        { content: '辽E444', time: '2019-05-16', orderStatus:'提交中'}
        ],     
      },
      {
        status: '已结算',
        key:'tab2',
        content: '',
  
      }
    ],
 
  },
    onLoad: function(options) {
    // 页面一加载我把默认的第一个选项传过去；这里没具体写；就是怕私自更改第一个key
    this.tab_item = this.selectAllComponents('#tab_item')   
    // 注意这是个数组；因为组件是循环的
    console.log(this.tab_item)
    this.tab_item[0].getKey(this.data.tab[0].key)
  },
  // zujian 
// 1. 先搞轮播时候添加对应类名显示线条
// 大概思路： (tab栏的每一项和轮播的每一项都是遍历的同一个数组tab;tab_item组件会被渲染成两个,一个组件带一个传过去的item_key值，这个值传过去后就不会变了；通过改变轮播图的时候拿到这个当前key传过去去和item_key看是否相等来显示线条也就是加类名)
  // 在这里我把每一项的item_key传过去，轮播的时候，我再把轮播到具体的key传过去, 类名就比较这两个key；相等则添加
 swiperChange(e) {
    console.log(e.detail.current)
    let swi_index = e.detail.current
    let key = this.data.tab[swi_index].key
   console.log(key)                // 可以想象成一个轮播对应一个组件实例; 因为都是渲染的一个tab啊；有一个共同标识符key
    this.tab_item.forEach(item=>{     // 先给每一个要比较的current_key传一个自定义的值(luan),那样就都不和item_key相等；
                                        // 然后再把轮播到当前项的key传过去,就ok；就确保只有一个相等；因为另个是luan;
        item.getKey('luan')
    })
   this.tab_item[swi_index].getKey(key) 
   console.log(this.tab_item)
  },
  // 2 拿到当前点击的key也就是item_key来控制轮播当前项
  getSon(e) {
    let that = this
    //e.detail.son 就是当前点击的key
    let current_key = e.detail.son
    console.log(e)
    this.data.tab.some(function (item, index) {
      if (item.key == current_key) {
        that.setData({
          index: index
        })
        return
      }
    })
  },