小程序学习（八）：自制一个选项卡，没有抽成自定义组件，没用引用vant组件

2019年9月12日

选项卡选项

<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>

这是选项卡上面的选项

CSS样式

/* 2019.09.11新增 */
.swiper-tab{
  width: 100%;
  border-bottom: 1rpx solid #ccc;
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  margin-bottom: 2rpx;
  background-color: white;
}
.swiper-tab-item{
  display: inline-block;
  width: 33.33%;
  color:#939494;
}
.active{
  color:#036EB8;
  border-bottom: 2rpx solid #036EB8;
}

其中的切换方法
js文件

data:{
	currentTab:0,   //选项卡下标
	windowHeight:'',  //页面高度
},
 /**
  * 生命周期函数--监听页面加载
  * 页面加载时获取页面高度
  */
 onLoad: function (options) {
   var systemInfo = wx.getSystemInfoSync();
   this.setData({
     windowHeight: systemInfo.windowHeight
   });
 },
 /**
  * 方法--选项卡切屏
  * 创建时间：2019.09.11
  * clickTab=>点击切换
  * swiperTab=>改变事件
  */
 clickTab(e) {
   var that = this;
   if (this.data.currentTab === e.target.dataset.current) {
     return false;
   } else {
     that.setData({
       currentTab: e.target.dataset.current
     })
   }
 },
 swiperTab(e) {
   var that = this;
   that.setData({
     currentTab: e.detail.current
   });
 },

选项卡内容

wxml文件
注：这个就跟在上一个的HTML代码下面，是同一个页面

<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" style="height: {{windowHeight-65}}px;">
  <!-- 求职者邀约 -->
  <swiper-item>
    <scroll-view scroll-y="true" style="height:100%;" >
      <view>
      	<!-- 求职邀约内容 -->
      </view>
    </scroll-view>
  </swiper-item>
  <!-- 婚恋者邀约 -->
  <swiper-item>
    <scroll-view scroll-y="true" style="height:100%;" >
    	 <!-- 婚恋邀约内容 -->
    </scroll-view>
  </swiper-item>
</swiper>

其中的 swiper-item是固定高度的，只有页面的三分之一左右，
所以在页面加载时获取页面高度，调整swiper-item的高度，
但是因为里面的内容是填充的，可能很长，不可能仅仅一个屏幕的长度，
所以用了scroll-view，竖向的一个滚轴，高度填写100%，就可以将所有内容显示出来