小程序轮播图+缩略图展示（用两个swiper，通过相同的current来实现联动）

展示形式：
网上找了些例子，发现根本无法可用。
开始用 scroll-view来做缩略图展示，计算大图对应小图的位置比较麻烦。
以下用两个swiper，通过相同的current来实现联动 做到的效果：大图小图同时展示在屏幕上。大图切换，小图居中显示。小图点击，显示对应大图，小图位置居中

  <view class="pswiper-box">
  	<!--大图轮播-->
        <view class="pictures-box">
          <view class="photo" >
            <swiper class="swiper" bindchange="bindchange" current="{{currentIndex}}" indicator-dots="{{indicatorDots}}" previous-margin="20rpx"  interval="{{interval}}"  circular="true">
              <block wx:for="{{imgData}}"   wx:for-key="index1"   wx:for-index="index1" wx:for-item="picture">
                <swiper-item >
                  <view class="poster-box">
                    <image mode="widthFix"  class="img" src="{{picture.preview}}" />
                  </view>
                </swiper-item>
              </block>
            </swiper>
          </view>
        </view>
        <!--小图-->
        <view class="pswiper-face" >
          <view class="photo" >
              <swiper class="swiper" display-multiple-items="3.4" current="{{thumurlCurrent}}" indicator-dots="{{indicatorDots}}" previous-margin="20rpx"  interval="{{interval}}"  circular="true">
                <block wx:for="{{imgData}}"  key="index" index="index" item="item">
                  <swiper-item >
                    <view class="poster-box">
                      <image mode="widthFix"  @tap="showPictrue({{index}})"  class="img  {{currentIndex == index ? 'on' : ''}}" src="{{item.preview}}" />
                    </view>
                  </swiper-item>
                </block>
             </swiper>
          </view>
       </view>
  </view>

  data = {
    scrollLeft: 0,
    currentIndex : 0,
    indicatorDots: false,
    interval: 3000,
    imgData:[ // 个数要超过4个
      {"thumurl": "http://xxxxxx/small.png?v=2",
      "preview": "http://xxxxxx/big.png?v=2"
      },
      .......
    ]
  }
  computed = {
    thumurlCurrent(){
      if(this.currentIndex - 1 < 0){
         return  this.imgData.length  -1;
      }else{
         return  this.currentIndex - 1;
      }
     
    },
  }

  methods = {
   showPictrue(index){
      this.currentIndex = index;
      this.$apply()
    },
    bindchange(event){
      this.currentIndex = event.detail.current;
      console.log(this.currentIndex);
    }
  }

<style lang="less" scoped>
.pswiper-box {
  .pswiper-preview {
    width: 710rpx;
    margin-left: 20rpx;
    height: 346rpx;
  }
  .pictures-box {
    position: relative;
    .iconfont {
      position: absolute;
      top: 150rpx;
      z-index: 10;
      font-size: 44rpx;
      color: rgba(255,255,255,.8);
    }
    .left-arrow {
      left: 30rpx;
    }
    .right-arrow {
      right: 30rpx;
    }
    .poster-box {
      width: 710rpx;
      height: 346rpx;
      background: #fff;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .photo {
      width: 100%;
      .swiper {
        height: 346rpx;
      }
      .img {
        width: 100%;
        vertical-align: top;
        height: 346rpx!important;
      }
    }
  }
  .pswiper-face {
    position: relative;
    margin-top: 20rpx;
    .poster-box {
      width: 194rpx;
      height: 114rpx;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .photo {
      width: 100%;
      .swiper {
        height: 114rpx;
      }
      .img {
        width: 100%;
        vertical-align: top;
        height: 106rpx!important;
        &.on{
          border: 4rpx solid #fff;
        }
      }
    }
  }
 .pswiper-faces {
     white-space: nowrap;
     overflow-x: scroll;
     -webkit-overflow-scrolling: touch;
    .pswiper-item {
      margin: 10rpx 20rpx 10rpx 0;
      width: 194rpx;
      height: 106rpx;
      box-sizing: border-box;
      &.on{
        border: 4rpx solid #fff;
      }
    }
  }

}
</style>