先来看下效果图：
选项卡.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<list.length;i++){
var obj = list[i];
if(i == index){
obj.isSelect = true;
}else{
obj.isSelect = false;
}
}
return list;
}
