小程序获取当前时间页面swiper滑动切换

utils/utils.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

//判断两个时间比较大小
function compareDate(d1, d2) {
  return ((new Date(d1.replace(/-/g, "\/"))) > (new Date(d2.replace(/-/g, "\/"))));
}

//当前时间获取
function getCurrentToday() {
  const date = new Date()
  var year = date.getFullYear();
  var mouths = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1);
  var day = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate();
  var hours = date.getHours();
  var Minutes = date.getMinutes();//当前分
  var currentdate = year + "-" + mouths + "-" + day + "\t" + hours + ":" + Minutes;
  return currentdate
}

/**
 * 传入时间后几天
 * param：传入时间：dates:"2018-04-02",later:往后多少天
 */
function dateLater(dates, later) {
  let dateObj = {};
  let show_day = new Array('七', '一', '二', '三', '四', '五', '六');
  let date = new Date(dates);
  date.setDate(date.getDate() + later);
  let day = date.getDay();
  dateObj.dates = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + "." + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  dateObj.newdates = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + "-" + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  dateObj.year = date.getFullYear();
  dateObj.month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1);
  dateObj.day = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  dateObj.week = show_day[day];
  return dateObj;
}

module.exports = {
  formatTime: formatTime,
  compareDate: compareDate,
  getCurrentToday: getCurrentToday,
  dateLater: dateLater

}

utils/config.js

var config = {
  host: 'url',//后台接口地址
  getHost() {
    return this.host;
  }
}
module.exports = config;

utils/network.js

//封装一个加载中请求效果
var requestHandler = {
  url: '',
  data: {},
  method: '',
  success: function (res) {
  },
  fail: function () {
  },
  complete: function () {
  }
}

function request(requestHandler) {
  var data = requestHandler.data;
  var url = requestHandler.url;
  var method = requestHandler.method;
  wx.showLoading({
    title: '加载中',
  })
  wx.request({
    url: url,
    data: data,
    method: method,
    success: function (res) {
      requestHandler.success(res)
      setTimeout( () =>{
        wx.hideLoading()
      }, 500)
    },
    fail: function () {
      wx.hideLoading();
      requestHandler.fail();
    },
    complete: function () {

    }
  })
}
module.exports = {
  request: request
}

pages/index.wxml

<!--pages/team/team.wxml-->
 <!-- 当前日期及往后6天 -->
      <view class="container_date" >
      <view wx:for="{{dateList}}" wx:key="index" class="item" bindtap="bindSelect" data-sel="{{item.dates}}" data-index="{{index}}" >
            <view class="core">
            <view class="ding">
              <view wx:if="{{index==0}}">今天</view>
              <view wx:else>{{item.week}}</view>
              <view class="{{index==showIndex?'show':'hide'}}" style="font-size:10px;">
              {{item.dates}}                 </view>
              </view>
              <image src="../../images/xian.png" class="img_xian {{index==showIndex?'active':''}}"></image>
            </view>
      </view>
    </view>

    <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" 
     style="height:{{winHeight}}rpx"> 
    <swiper-item  wx:for="{{[1,2,3,4,5,6,7]}}" wx:key="index">
      <scroll-view scroll-y="true" style="height:100%;width:100%;" >
        <view wx:if="{{isShow}}">
          <view wx:if="{{tuanCourse==''}}" class="wu">
          <text class="wu">暂无排课</text>
          <br/>
          <text class="wu">敬请期待</text>
        </view>
          <view wx:for="{{tuanCourse}}" wx:key="index">
            <view class="title">{{item.area}}</view>
              <view class="content"  wx:for="{{item.val}}" wx:key="index">
                <view class="c_tit">团课</view>
                <view class="f_content">
                  <view class="left">
                    <image src="{{url}}{{item.course_img}}"></image>
                  </view>
                  <view class="right">
                    <text>{{item.course_name}}</text>
                    <br/>
                    <text wx:for="{{item.course_label}}">
                                <text>{{item}} </text>
                              </text>
                    <br/>
                    <text class="color_t">{{item.date}}　{{item.between_time}}</text>
                    <button size="mini" class="btn" wx:if="{{item.status==1 && item.old_people_number<item.course_people_number}}" style="color:#6e6c6c;border:1px solid #6e6c6c;">停止</button>
                    <button size="mini" class="btn" wx:if="{{item.status==0 && item.old_people_number<item.course_people_number}}" bindtap="subscribeCourse" data-courseId="{{item.id}}">预约</button>
                  </view>
                </view>
                <image class="fixation" src="../../images/j.png" wx:if="{{item.status==0 &&item.old_people_number<item.course_people_number}}"></image>
              <image class="fixation" src="../../images/w.png" wx:if="{{item.old_people_number>item.course_people_number}}"></image>
                <image class="fixation" src="../../images/w.png" wx:if="{{item.old_people_number==item.course_people_number}}"></image>
              </view>
          </view>
           <!-- <footer></footer> -->
          </view>
         
      </scroll-view>
    </swiper-item>
   </swiper>

pages/index.wxss

/* pages/team/team.wxss */
.title{background: #313131;padding-left: 3%;line-height: 46rpx;}
.content{width: 92%;margin: 20rpx auto;position: relative;}
.f_content{display: flex;background:#313131;padding: 10rpx 0;align-items: center;
border-radius: 0 0 10rpx 10rpx;}
.content image{height: 130rpx;width: 130rpx;border-radius: 50%;}
.f_content .left{width: 30%;text-align: center;}
.f_content .right{width: 70%;position: relative}
.c_tit{height: 56rpx;line-height: 56rpx;background: #000;padding-left: 3%;border-radius:10rpx 10rpx 0 0;}
.color_t{color:#1fa39c;}
.content .fixation{width:94rpx;height: 88rpx;position:absolute;top: 0;right: 0;border-radius:0;}
.right .btn{background:none;color:#1fa39c;position: absolute;top:20rpx;right:10rpx;
border: 1px solid #1fa39c;width: 90rpx;height: 58rpx;padding: 0;}



.container_date{display: flex;justify-content: space-around;margin: 10rpx auto;border-bottom:1px solid #323232;}
.item{font-size:12px;text-align: center;width:14.2%;height:70rpx;}
.hide{display:none;}
.show{display:inline-block;}
.core{margin: 0 auto;position: relative;}
.img_xian{
  height: 69rpx;
  width: 69rpx;
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right: 0;
  margin: auto;
  opacity: 0
}
.img_xian.active{opacity: 1}

pages/index.js

// pages/team/team.js
var util = require('../../utils/util.js');
var config = require("../../utils/config.js");
var network = require("../../utils/network.js");
Page({

  /**
   * 页面的初始数据
   */
  data: {
    courseName:'',
    courseId:'',
    tuanCourse:[],
    year:'',
    mon:'',
    day:'',
    dateList:[],
    showIndex: 0,
    winHeight: "",//窗口高度
    url:getApp().globalData.url,
    isShow:false,
    shopid:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    if(options.shop_id){
      this.setData({
        shopid:options.shop_id
      })
    }
    wx.getSystemInfo({
      success: (res) => {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR - 180;
        console.log(calc)
        this.setData({
          winHeight: calc
        });
      }
    });
    let dateList = this.getDates(7);
    let year = dateList[0].year;
    let mon = dateList[0].month;
    let day = dateList[0].day;
    const date = new Date()
    this.setData({
      courseName:options.name,
      courseId:options.id,
      dateList: dateList,
      year: year,
      mon: mon,
      day: day
    })
    this.getData()
  },
  //获取当前时间
  getCurrentMonthFirst: function () {
    var date = new Date();
    var todate = date.getFullYear() + "-" + ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1) + "-" + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
    return todate;
  },
  bindSelect: function (e) {
    //console.log(e)//选择结果值
    //console.log(e.currentTarget.dataset.index)
    this.setData({
      isShow:false,
      showIndex: e.currentTarget.dataset.index,
      day: this.data.dateList[e.currentTarget.dataset.index].day,
      mon: this.data.dateList[e.currentTarget.dataset.index].month,
      year: this.data.dateList[e.currentTarget.dataset.index].year,
    })
    this.getData();
  },
  getDates: function (days, todate = this.getCurrentMonthFirst()) {
    var dateArry = [];
    for (var i = 0; i < days; i++) {
      var dateObj = util.dateLater(todate, i);
      dateArry.push(dateObj)
    }
    return dateArry;
  },
  getData:function(){
    network.request({
      url: config.host + 'api_v1/course', //课程
      data: {
        cate_id: this.data.courseId,
        course_name: this.data.courseName,
        year:this.data.year,
        mon:this.data.mon,
        day:this.data.day,
        shop_id:this.data.shopid
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
        // console.log(res.data.data)
        this.setData({
          tuanCourse: res.data.data,
          isShow: true
        })
       // console.log(this.data.tuanCourse[0].val)
      }
    })
  },
  switchTab: function (e) {//页面滑动出发事件
    //console.log(e)
    this.setData({
      isShow:false,
      showIndex: e.detail.current,
      day: this.data.dateList[e.detail.current].day,
      mon: this.data.dateList[e.detail.current].month,
      year: this.data.dateList[e.detail.current].year,
    })
    this.getData();
  }

})