微信小程序选项卡功能的实现

先来看下效果图：

选项卡.gif

功能分析：
1、上部分是用Scroll-View，下半部分是用Swiper实现
2、我们主要是控制Scroll-View的scroll-left和Swiper的bindchange属性，当点击Scroll-View时获取点击哪个item,进一步获取索引index，将Swiper移动到相应位置，当滑动Swiper时也是获取index，将Scroll-View移动到相应位置
3、topScrollTo = index*50 - windowWidth/2这句代码将选中的Scroll-View的Item置于屏幕中间位置
js中主要逻辑代码如下：

// 点击了上部的scrollciew的item
  clickedTopItem: function(e){
    var index = e.currentTarget.dataset.index;
    var list = this.setTopList(index)
    this.setData({
      contentIndex:index,
      items:list
    }) 
  },
  // 滑动weiper时调用
  swiperChanged:function(e){
    var index = e.detail.current;
    var list = this.setTopList(index);
    var topScrollTo = 0;
    if(index*50 > windowWidth/2){
        topScrollTo = index*50 - windowWidth/2
    }
    currentIndex = index;
    this.setData({
      topScrollTo: topScrollTo,
      items:list
    })
  },
  // 设置top中的数据
  setTopList:function(index){
    var list = this.data.items;
    for(let i = 0;i