小程序 tab和swiper的结合效果

项目中遇到一个tab效果,并且能左右滑动的效果.总结一下:
html:

<view class="tab" style="height:{{heigh}}px">
      <view class="tabTitle">
        <scroll-view>
          <view id="0" class="{{activeIndex == 0 ?'titleActive':''}} titleItem" bindtap="tabClick" >
            我的任务
            <view class="arrow" wx:if="{{showArrow}}">view>
          view>
          <view id="1" class="{{activeIndex == 1 ?'titleActive':''}} titleItem" bindtap="tabClick">
            我的智库
            <view class="arrow" wx:if="{{!showArrow}}">view>
          view>
        scroll-view>
      view>
      <view class="tabBody" >
        <view class="tabBodyWrap" >
            <swiper current="{{activeIndex}}" duration="500" bindchange="swiperChange" ">
              <swiper-item>
                  任务项目
              swiper-item>
              <swiper-item>
                  智库项目
              swiper-item>
            swiper>
        view>
      view>
    view>

js:

tabClick:function(e){
    var that = this;
    var idIndex = e.currentTarget.id;
    this.setData({
      activeIndex:idIndex,
    });
  },
   swiperChange:function(e){
      var current = e.detail.current;
      this.setData({
        activeIndex:current,
      });

  },