微信小程序里tab栏切换效果带滑动，作为模板来使用

创建template目录

template.wxml 定义：
<!--template/template.wxml-->
<template name="tem">
  <view class='tab_box'>
    <view class='tab_tab'>
      <block wx:for="{{tab}}">
        <view class='{{item.bar==true?"tab_border":""}}' bindtap='tab_change' data-tab_index="{{index}}">{{item.status}}</view>
      </block>
    </view>
    <view class='tab_swiper'>
      <swiper current="{{index}}" bindchange="swiperChange">
        <swiper-item wx:for="{{tab}}">
          <!-- 如果有内容就显示；没有内容显示其他 -->
          <scroll-view scroll-y='true' wx:if="{{item.content.length>0}}">
            <!-- swiper循环生成的每一项 可以根据自己需求来换 -->
            <block wx:for="{{item.content}}" wx:for-item="xitem">
              <view class='item'>
                <view class='item_left'>
                  <view>{{xitem.content}}</view>
                  <view class='gray'>{{xitem.time}}</view>
                </view>
                <view class='item_right'>{{xitem.orderStatus}}</view>
              </view>
            </block>
          </scroll-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>
  </view>

</template>

template.js 使用默认生成就行,不需要添加

/*template.wxss */
/* 无数据展示的 */
swiper {
  height: 536rpx;
  background-color: white;
  margin-top: 1rpx;
}
.img {
  width: 219rpx;
	height: 223rpx;
  margin: 0 auto;
  display: block;
}
.liji {
  width: 284rpx;
	height: 65rpx;
	background-image: linear-gradient(90deg, 
		#ffc366 0%, 
		#fe8f61 100%);
	border-radius: 33rpx;
  margin: 0 auto;
  text-align: center;
  line-height: 65rpx;
}
.box {
  text-align: center;
}
.ttt {
  display: block;
  margin: 30rpx auto;
}
scroll-view {
  height: 536rpx
}

/* tab */


.tab_tab {
  height: 70rpx;
  display: flex;
  justify-content: space-around;
  background-color: white;
  margin-bottom: 1rpx;
    line-height: 70rpx;
}
.tab_border {
  border-bottom: 1rpx solid green;
  height: 100%;

}
.tab_swiper {
  height: 540rpx;
}
swiper {
  border: 0;
  margin: 0;
  height: 100%;
}
.item {
  box-sizing: border-box;
  margin: 10rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #ccc;
}
.item_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
scroll-view {
  height: 540rpx;
}
.box {
  text-align: center;
}
.ttt {
  display: block;
  margin: 30rpx auto;
}
.gray {
    color: gray;
}
.item_right {
  color: red;
}

需要引入的页面例如(index.wxml)需要使用，下面是index.wxml操作

<!--引入定义的模板-->
<import src="../../template/template" />
<!-- is 指向定义template时候的name属性值   data="{{模板定义时候需要用到的属性，直接在这里写就能用到index.js里的数据}}-->
<template is="tem" data="{{tab,index}}"></template>

/*引入wxss*/
@import '/template/template.wxss';

data: {
    index:0,			// 轮播索引
    tab: [{
        status: '进行中',
      content: [       // 轮播展示内容  模拟后台数据
        { content: '辽E444', time: '2019-05-16', orderStatus:'提交中'}
        ],     
        bar: true       // 默认带线条显示
      },
      {
        status: '已结算',
        content: '',
  
      }
    ],
  },
  tab_change(e) {
    this.setData({
      index: e.target.dataset.tab_index
    })
  },
  swiperChange(e) {
    console.log(e.detail.current)
    let swi_index = e.detail.current
    this.data.tab.forEach((item, value) => {
      item.bar = false
    })
    this.setData({
      tab: this.data.tab
    })
    this.data.tab[swi_index].bar = true
    this.setData({
      tab: this.data.tab
    })
    console.log(this.data.tab)
  },