小程序選項卡小Demo，可滑動控制 - JavaShuo

思緒
1.選項卡使用scroll-view,實現能夠滑動控制效果；
2.使用current控制選項卡標題和內容的統一，實現同步操做；
3.winHeight 這個是我最經常使用的var calc = clientHeight * rpxR - 440; 440這個值是你所不須要計算的高度值，取決於你除內容以外的高度；
wxml文件app

<view class="pinConDet">
  <view class='title'>標題</view>
  <view class='con'>
    <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}" class='tabBox'>
        <view class="tab-item {{currentTab==0?'active':''}}"  data-current="0" bindtap="swichNav">選項1</view>
        <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">選項2</view>    
    </scroll-view>
    <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
     style="height:{{winHeight}}rpx">
      <swiper-item>
        <scroll-view scroll-y="true" class="scoll-h" >
          <view class="title1">
            選項卡1內容
          </view>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y="true" class="scoll-h" >
          <view class="title1">
            選項卡2內容
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</view>

wxss文件xss

.pinConDet{
  padding: 30rpx;
}
.pinConDet .title{
  color: #3491f0;
  font-size: 15px;
  height: 100rpx;
  line-height: 100rpx;
}
.pinConDet .tabBox{
  border-bottom: 1px solid #3491f0;
}
.pinConDet .tab-item{
  font-size: 15px;
  display:inline-block;
  width: 120rpx;
  margin-left: 20rpx;
  background: #e9f2fa;
  color: #3491f0;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
.pinConDet .active{
  background: #3491f0;
  color: #fff;
}
.tab-content swiper-item view{
  padding: 30rpx;
  font-size: 15px;
}

js文件this

var app = getApp()
Page({
  data: {
    winHeight: "",//窗口高度
    currentTab: 0, //預設當前項的值
    scrollLeft: 0, //tab標題的滾動條位置
    showView: false,
    cWayshow: false,
  },
  // 滾動切換標籤樣式
  switchTab: function (e) {
    this.setData({
      currentTab: e.detail.current
      //獲取當前事件current的值；
    });
    this.checkCor();
  },
  // 點擊標題切換當前頁時改變樣式
  swichNav: function (e) {
    var cur = e.target.dataset.current;
    if (this.data.currentTaB == cur) { return false; }
    else {
      this.setData({
        currentTab: cur
      })
    }
  },
  //判斷當前滾動超過一屏時，設置tab標題滾動條。
  checkCor: function () {
    if (this.data.currentTab > 4) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },
  onLoad: function (options) {
    showView: (options.showView == "true" ? true : false);
    cWayshow: (options.showView == "true" ? true : false);
    var that = this;
    //  高度自適應
    wx.getSystemInfo({
      success: function (res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        console.log(clientHeight)
        var calc = clientHeight * rpxR - 440;
        console.log(calc)
        that.setData({
          winHeight: calc
        });
      }
    });
  }
})

最後實現效果樣式呈現
spa