小程序swiper实现订单列表

实现如图效果，点击切换，拖动切换的效果。。。

视图层WXML:

<view class="swiper-tab">
  <view wx:for="{
  {navTab}}" wx:key="{
  {index}}" class="swiper-tab-list {
  {currentTab==index ? 'on_pdd' : ''}}" data-current="{
  {index}}" bindtap="switchNav">{
  {item}}</view>
</view>
<view class="c_t60"></view> 

<swiper current="{
  {currentTab}}" class="swiper-box" duration="300" style="height:{
  {winHeight}}px" bindchange="bindChange">
  <swiper-item wx:for="{
  {navTab}}" wx:key="index">
    <scroll-view class="scrollWrap" scroll-y="true" style='height:{
  {winHeight}}px;'>
      <my-noData wx:if="{
  {orderList.length<1&&!loading}}" nodata="{
  {nodataType}}"></my-noData>
      <view class="orderList" wx:for="{
  {orderList}}" wx:key="index" data-item="{
  {item}}" bindtap='toDetail'>
        <view class="shop">
          <view class="shop_name">
            <image src='{
  {item.shopurl}}' mode='widthFix' lazy-load='true'></image>
            {
  {item.shop}}
          </view>
          <text class="state {
  {item.origin=='TaoBao' ? 'state_taobao' : item.origin=='PinDuoDuo' ?