小程序用swiper组件实现tab选项卡（实现tab左右滑动效果）

标题小程序用swiper组件实现tab选项卡（实现tab左右滑动效果）

先附上wxml代码

1. 这是我写项目过程中写的，为了节省时间，后面几个页面就用tabx文字代替。
2. 用scroll-view组件实现头部标签的横向滚动
3. swiper组件来实现对应tab页面的切换
4. 注意标签元素一定要加高度，不然滚动条会被掩盖。
5. css代码写的顺序没那么对应，希望大家见谅

**说明一下几个属性代表的意义**
 1. isSelect来定义当前头部标签的索引 
 2. changTab点击事件切换头部标签，通过判断自定义属性data-type是否与isSelect的值相等，来判断类名的切换
 3. swiper组件的current属性代表tab页面的索引
 4. 通过swiper组件change绑定事件bindChange拿到e.detail.current表示当前tab是哪一页
<view class='container'>
     <view class='con-title'>   
     <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
    <block wx:for='{{conTab}}' wx:key="index"  >
        <view class="tab-item {{isSelect==index?'select':''}}" bindtap="changeTab" data-type="{{index}}">
          {{item}}
        </view>
    </block>
</scroll-view>
  </view>   
  <view class='box'>
    <swiper current="{{isSelect}}" class="swiper-box" bindchange="bindChange" duration="300" style='height:{{winHeight}}rpx'>
      <swiper-item class="swiper-item">
        <view class='tab-swiper'>
          <view class='question'>
            <view class='qu-title'>基础题型</view>
            <view class='qu-icon'>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/dan.png'></image>
                </view>
                <view class='qu-text'>单选</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/double.png'></image>
                </view>
                <view class='qu-text'>多选</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/tiankong.png'></image>
                </view>
                <view class='qu-text'>填空</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/dafen.png'></image>
                </view>
                <view class='qu-text'>打分</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image style='width:50rpx' class='qu-img' src='../assets/tupianshangchuan.png'></image>
                </view>
                <view class='qu-text'>图片上传</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/xiala.png'></image>
                </view>
                <view class='qu-text'>下拉</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/toupiao.png'></image>
                </view>
                <view class='qu-text'>投票</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/paixu.png'></image>
                </view>
                <view class='qu-text'>排序</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/liangbiao.png'></image>
                </view>
                <view class='qu-text'>量表</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' style='width:50rpx' src='../assets/jiliangbiao.png'></image>
                </view>
                <view class='qu-text'>NPS</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' style='height:44rpx' src='../assets/fenye.png'></image>
                </view>
                <view class='qu-text'>分页</view>
              </view>
            </view>
          </view>
          <view class='question'>
            <view class='qu-title'>个人信息</view>
            <view class='qu-icon'>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/xingming.png'></image>
                </view>
                <view class='qu-text'>姓名</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' style='width:50rpx;height:26rpx;' src='../assets/xingbie.png'></image>
                </view>
                <view class='qu-text'>性别</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/nianling.png'></image>
                </view>
                <view class='qu-text'>年龄</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' style='height:50rpx' src='../assets/shouji.png'></image>
                </view>
                <view class='qu-text'>手机</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' style='width:50rpx' src='../assets/youxiang.png'></image>
                </view>
                <view class='qu-text'>邮箱</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/time.png'></image>
                </view>
                <view class='qu-text'>日期</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/shijian.png'></image>
                </view>
                <view class='qu-text'>时间</view>
              </view>
              <view class='qu-con'>
                <view>
                  <image class='qu-img' src='../assets/dizhi.png'></image>
                </view>
                <view class='qu-text'>地址</view>
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <view class="slide-view">tab0</view>
      </swiper-item>
       <swiper-item class="swiper-item">
        <view class="slide-view">tab1</view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <view class="slide-view">tab2</view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <view class="slide-view">tab3</view>
      </swiper-item>
         <swiper-item class="swiper-item">
        <view class="slide-view">tab4</view>
      </swiper-item>
    </swiper>
  </view>
</view>

js代码

 data: {
    winHeight:'',//窗口高度
    conTab: ['题型', '题库', '题型', '题库', '题型', '题库'],
    isSelect: 0,//当前选中tab的索引
    scrollLeft:0,//标签滚动条的位置
  },
   // 滚动切换标签样式
  bindChange: function (e) {
    var that=this;
    console.log(e.detail.current)
    this.setData({
      isSelect:e.detail.current,
    });
    that.scrollTab();
  },
  //点击标签切换页面样式
  changeTab: function (e) {
    console.log(e.currentTarget.dataset.type)
    let isSelect = e.currentTarget.dataset.type
    if(this.data.isSelect==isSelect){
      return false
    }else{
      this.setData({
        isSelect: isSelect
      })
    }
  },
   //当标签个数超过屏幕所容纳个数的时候，标签可以横向滚动
  scrollTab: function () {
    if (this.data.isSelect > 3) {
      this.setData({
        scrollLeft: 200
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },
  onLoad: function (options) {
    var that = this;
    //  高度自适应
    wx.getSystemInfo({
      success: function (res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
          console.log(clientHeight,clientWidth)
        var calc = clientHeight * rpxR +180 ;
        console.log(calc)
        that.setData({
          winHeight: calc
        });
      }
    });

wxss代码

page {
  background: #f3f3f3;
}

.container {
  height: 100%;
  background: #f3f3f3;
}

.con-title {
  width: 750rpx;
  height: 60rpx;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 30rpx;
  position: relative;
}

.tab-item {
  height: 74rpx;
  margin: 0 70rpx;
  display: inline-block;
}

.select {
  color: #20beff;
  border-bottom: 6rpx solid #20beff;
}

/* 
//(这段代码是我看另一个博主写的，也是一种方法)
.tab-item{margin:0 36rpx;display: inline-block;}
.tab-item.active{color: #4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;} */

.question {
  width: 690rpx;
  margin: 30rpx auto;
  background: #fff;
}

.qu-title {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 30rpx;
  color: #999;
  border-bottom: 1px solid #dddcdc;
}

.qu-icon {
  padding-left: 55rpx;
  display: flex;
  justify-content: left;
  align-items: center;
  flex-wrap: wrap;
}

.qu-con {
  width: 120rpx;
  margin: 40rpx 15rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.qu-img {
  width: 40rpx;
  height: 40rpx;
}

.qu-text {
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 30rpx;
  color: #999;
}

.box {
  width: 750rpx;
}

.swiper-item {
  overflow-y: scroll;
}

.tab-h {
  width: 100%;
  display: flex;
  height: 80rpx;
  box-sizing: border-box;
  line-height: 80rpx;
  background: #fff;
  font-size: 30rpx;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  margin-bottom: 30rpx;
}