微信小程序利用scroll-view和swiper实现标签页

小程序实现一个联动的效果，具体效果看图。

图片.png
图片.png

上方是一个可滚动的标签栏。下面也是可以滚动的内容区。点击上方标签栏，下方内容跟着切换到响应的界面。下面滚动时候，上面的标签栏也跟随切换选中效果。

上代码：
wxml：

<view class='top_bottomView'>
  <scroll-view scroll-x class="scroll-x" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
    <block wx:for="{{list}}" wx:key="{{index}}">
      <view class="view-item {{clickNumber==index?'item-active':''}}" bindtap='centerTap'>
        {{item}}
      </view>
    </block>
  </scroll-view>
  <view class='top_rightView'>
    <image src='../../image/home/a1_icon_flpd@2x.png' class='top_rightImage'></image>
  </view>
</view>
<!-- 内容区 -->
<swiper style="height:1100rpx" bindchange='changeSwipe' current='{{clickNumber}}'>
  <swiper-item  wx:for="{{list}}" wx:key="index">
    <!-- <include src="../home/jingxuan.wxml" /> -->
    <view class='test-class'>{{list[index]}}</view>
  </swiper-item>
</swiper>

js:

const app = getApp()
Page({
  data: {
    list:['精选','新闻','电影','电视剧','综艺','少儿','体育','音乐','游戏'],
    clickNumber:0,
  },
  //点击上方文字  切换
  centerTap:function(event) {
    //点击的偏移量
    console.log(event);
    var cur = event.detail.x;
    console.log(cur);
    //每个tab选项宽度占15%
    var singleNavWidth = wx.getSystemInfoSync().windowWidth * 12 / 100;      
    console.log(singleNavWidth);                    
    this.setData({
        clickNumber: parseInt(cur / singleNavWidth)
    })
  },
  changeSwipe:function(event) {
    console.log(event);
    var type =
      event.detail.current;
    this.setData({
      clickNumber: type
    });
  },

  onLoad: function () {
    
  },
})

wxss：

.top_bottomView {
  display: flex;
}

.scroll-x {
  height: 62rpx;
  width: 90%;
  background: #ec4c3d;
  white-space: nowrap;
  /* display: flex;i */
  box-sizing: border-box;
  overflow: hidden;
}
/* 隐藏scrollbar */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.view-item {
  width: 12%;
  /* height: 62rpx; */
  display: inline-block;
  text-align: center;
  font-size: 25rpx;
  color: #fff;
  opacity: 0.6;
}
.item-active {
  color: #fff;
  opacity: 1;
  font-size: 32rpx;
}

.top_rightView {
  position: relative;
  background: #ec4c3d;
  width: 10%;
  height: 62rpx;
  right: 0;
}

.top_rightImage {
  position: absolute;
  left: 20rpx;
  top: 20rpx;
  height: 32rpx;
  width: 32rpx;
}

主要思想就是利用一个int值来记录当前的index，当滚动swiper或者点击scroll-view上的标签时，改变这个index，从而达到上方的选中效果和下面的内容页同步。

有几个注意点

怎么去计算scroll-view当前点击的第几个标签

当触发scroll-view的点击事件，通过参数event可以获取好多参数，但是由于布局的原因，无法拿到当前的index，所以我只能让每个标签的宽度一定，是屏幕宽度的百分之十四，通过获取当前点击位置的x值去计算。

swiper的高度是固定的，要去设定他的高度。

对我来说，没有前端基础，所以上手小程序一开始wxss布局上有很大的问题，好多属性看的一脸懵逼。现在迫于小程序赶工期，所以只能多看一些成品源码，囫囵吞枣去照搬硬套。等闲下来要完整系统的去过一遍h5.