小程序——swiper制作tab选项卡后高度自适应

参考资料：
1.利用 swiper 制作 tab 选项卡
预览图和基本的代码在参考资料中已经写的很详细，如果不是找高度自适应部分可以直接点击查看
2.swiper-添加控制按钮（可以控制翻页上一页和下一页）

直接上代码：

app.js：

APP({
onLaunch: function() {
	        wx.getSystemInfo({
            success: function (res) {
            that.globalData.screenWidth = res.windowWidth;
            that.globalData.screenHight = res.windowHeight;
            that.globalData.screenWidthScale = res.windowWidth / 750;
            that.globalData.screenHightScale = res.windowHeight / 1334;
          }
        })
	},
globalData: {
    userInfo: null,
    screenWidthScale: 0.0,
    screenHightScale: 0.0,
    screenWidth: 0,
    screenHight: 0
  }
})

含有swiper页面的xml：

<view class="swiper-tab">
  <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">页面一</view>
  <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">页面二</view>
</view>

<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
  <swiper-item>
    <scroll-view scroll-y="true" class="tableView" style='height:{{scrollHeight}}px'>
    	//中间为页面一内容
    </scroll-view>
  </swiper-item>

  <swiper-item>
    <scroll-view scroll-y="true" class="tableView" style='height:{{scrollHeight}}px'>
    	//中间为页面二内容
    </scroll-view>
  </swiper-item>
</swiper>

含有swiper页面的js：

var app = getApp()
Page({
	data:{
		currentTab: 0,
		scrollHeight: 0,
	},
	onLoad:function (options) {
	  var that = this;
	  this.setData({
      	scrollHeight: app.globalData.screenHight,
    })
	},
	  //滑动切换
    swiperTab: function (e) {
      var that = this;
      that.setData({
        currentTab: e.detail.current,
      });
    },
  //点击切换
 	clickTab: function (e) {
   	   var that = this;
       if (this.data.currentTab === e.target.dataset.current) {
         return false;
        } else {
        that.setData({
          currentTab: e.target.dataset.current,
        })
     }
    },
})