小程序请假效果

var dateTimePicker = require('../../utils/dateTimePicker.js');
Page({
  // 页面的初始数据
  data: {
    date: '',
    winWidth: 0,
    winHeight: 0,
    // tab切换
    currentTab: 0,
  },
  //获取当前滑块的index
  bindchange: function(e) {
    const that = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  //点击切换，滑块index赋值
  checkCurrent: function(e) {
    const that = this;
    if (that.data.currentData === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentData: e.target.dataset.current
      })
    }
  },
  // 保存
  formSubmit: function(e) {

  },
  // 时间
  changeDate(e) {
    var that = this;
    that.setData({
      date: e.detail.value
    });
  },
  // 生命周期函数--监听页面加载
  onLoad: function(options) {
    // 获取当天时间
    var time = util.formatTime(new Date());
    that.setData({
      date: time,
    });
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
  },
  // 生命周期函数--监听页面初次渲染完成
  onReady: function() {

  },
  // 生命周期函数--监听页面显示
  onShow: function() {

  },
  // 生命周期函数--监听页面隐藏
  onHide: function() {

  },
  // 生命周期函数--监听页面卸载
  onUnload: function() {

  },
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function() {

  },
  //  页面上拉触底事件的处理函数
  onReachBottom: function() {

  }
})

<!--index.wxml-->
<view class="swiper-tab">
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view>
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view>
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view>
</view>
 
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

    <swiper-item>

    </swiper-item>

    <swiper-item>

    </swiper-item>

    <swiper-item>

    </swiper-item>
</swiper>

//index.js
//获取应用实例
var app = getApp()
Page( {
  data: {
    /**
        * 页面配置
        */
    winWidth: 0,
    winHeight: 0,
    // tab切换
    currentTab: 0,
  },
  onLoad: function() {
    var that = this;
 
    /**
     * 获取系统信息
     */
    wx.getSystemInfo( {
 
      success: function( res ) {
        that.setData( {
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
 
    });
  },
  /**
     * 滑动切换tab
     */
  bindChange: function( e ) {
 
    var that = this;
    that.setData( { currentTab: e.detail.current });
 
  },
  /**
   * 点击tab切换
   */
  swichNav: function( e ) {
 
    var that = this;
 
    if( this.data.currentTab === e.target.dataset.current ) {
      return false;
    } else {
      that.setData( {
        currentTab: e.target.dataset.current
      })
    }
  }
})

<!-- 标签 -->
<view class="swiper-tab">
  <!-- 标签列表 -->
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">新请假</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">请假结果</view>
</view>
<!-- 下方 -->
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  <!-- 1 -->
  <swiper-item>
    <!-- <form bindsubmit="formSubmit" bindreset="formReset">
      <view class='item'>
        





年级：
        <view class='bk'>
          <input name='nickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/>
        </view>
      </view>
      <view class='item'>
        





班级：
        <view class='bk'>
          <input name='nickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/>
        </view>
      </view>
      <view class='item'>
        





学号：
        <view class='bk'>
          <input name='realName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>
        </view>
      </view>
      <view class='item'>
        申请姓名：
        <view class='bk'>
          <input name='realName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>
        </view>
      </view>
      <view class='item'>
        请假天数：
        <view class='bk'>
          <input name='realName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>
        </view>
      </view>
      <view class='item'>
        开始时间：
        <view class='bk'>
          <view class='time'>
            <picker mode="date" value="{{date}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate" name="birthday">
              <view>
                {{date}}
              </view>
            </picker>
          </view>
        </view>
      </view>
      <view class='item'>
        结束时间：
        <view class='bk'>
          <view class='time'>
            <picker mode="date" value="{{date}}" start="1800-01-01" end="2222-01-01" bindchange="changeDate" name="birthday">
              <view>
                {{date}}
              </view>
            </picker>
          </view>
        </view>
      </view>
      <view class='item'>
        请假类型：
        <view class='bk'>
          <input name='realName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>
        </view>
      </view>
      <view class='item'>
        请假原因：
        <view class='bk'>
          <input name="detailAddress" class="textarea" placeholder="{{detailgeren.detailAddress}}" value='{{detailgeren.detailAddress}}' bindinput="detailAddress" maxlength='100' auto-height/>
        </view>
      </view>
      <view class='anniu'>
        <button class='btn' formType="submit">提交</button>
      </view>
    </form> -->

  </swiper-item>

  <!-- 请假结果 -->
  <swiper-item>
    <view class='region'>
      <view class='iteming'>
        <view>
          <view class='content'>
            病假
          </view>
          <view class='date'>
            2018.10.24-2018.10.25
          </view>
          <view class='day'>
            请假 1 天
          </view>
        </view>

        <view class='pic'>
          <image src='/images/icon-yes.png' style=" 150rpx; height: 150rpx; float: right;"></image>
        </view>
      </view>
    </view>

    <view class='region'>
      <view class='iteming'>
        <view>
          <view class='content'>
            事假
          </view>
          <view class='date'>
            2018.10.24-2018.10.25
          </view>
          <view class='day'>
            请假 1 天
          </view>
        </view>

        <view class='pic'>
          <image src='/images/icon-no.png' style=" 150rpx; height: 150rpx;"></image>
        </view>

      </view>
    </view>
  </swiper-item>
</swiper>

Page {
  background-color: #f1f1f1;
}

/* 标签 */

.swiper-tab {
  background-color: #fff;
  text-align: center;
  line-height: 80rpx;
}

/* 标签列表 */

.swiper-tab-list {
  font-size: 30rpx;
  display: inline-block;
   50%;
  color: #797979;
}

/* 选中 */

.on {
  color: #5fdafe;
  border-bottom: 5rpx solid #30d1ff;
}

/* 新请假 */

.img {
   200rpx;
  height: 200rpx;
  margin: 20rpx;
  border-radius: 50%;
  display: flex;
  overflow: hidden;
}

.item {
  display: flex;
  flex-direction: row;
  font-size: 30rpx;
  color: #acacac;
  margin: 25rpx;
  align-items: center;
}

.bg {
  margin: 50rpx 30rpx 0 30rpx;
}

.btn {
  background-color: #79caff;
  color: #fff;
   150rpx;
  font-size: 30rpx;
  margin-top: 30rpx;
}

.bk {
  border-radius: 10rpx;
  border: 2rpx solid #ccc;
  padding: 10rpx;
   65%;
}

.textarea {
   100%;
}

.radio-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 30rpx;
}

.radio {
  margin-left: 20px;
}

.anniu {
  display: flex;
  flex-direction: row;
}

/* 请假结果 */

.region {
  margin: 40rpx 40rpx 0 40rpx;
  height: 250rpx;
  background-color: #fff;
  border: 2rpx dotted #ccc;
  border-radius: 15rpx;
}

.iteming {
  display: flex;
  flex-direction: row;
}

.content {
  font-size: 45rpx;
  padding-top: 30rpx;
  margin-left: 50rpx;
}

.date {
  font-size: 25rpx;
  padding-top: 15rpx;
  margin-left: 50rpx;
  color: #7b7b7b;
}

.day {
  font-size: 35rpx;
  padding-top: 15rpx;
  margin-left: 50rpx;
}

.pic {
  position: relative;
  left: 150rpx;
  top: 45rpx;
}