站长资源网络编程

/* pages/calendar/calendar.wxss */
 .container {
 height: 100vh;

 background-color: #393E44;
}
.days-table {
 flex-wrap: wrap;
 align-content: flex-start;
}
.calendar{
 position: fixed;
 z-index:10000;
 background: #393E44;
 
}
.grid {
 width: 107.14rpx;
 height: 100rpx;
 text-align: center;
 line-height: 100rpx;
 font-size:.7rem;
 color:#fff;
}
.today {
 color: #88a1fd;
}
.grid view {
 height:85rpx;
 line-height: 85rpx;
 width:85rpx;
}
.choice view{
 border-radius: 50%;
 background: #88a1fd;
 background-position:center;
 color: white;
}
/* 非本月日期 */
.notCurrent {
 color: silver;
}
.day-hover {
 background: red;
}
.swpier-box {
 height: 550rpx;
 width: 100%;
}
.arrow {
 width: 100rpx;
 color: #88a1fd;
 text-align: center;
}
.year-and-month{
 color: #88a1fd;
}

.flex {
 display: flex;
}
/* 轴向 */
.column {
 flex-direction: column;
}
/* 主轴方向 */
.m-start {
 justify-content: flex-start;
}

.m-end {
 justify-content: flex-end;
}

.m-around {
 justify-content: space-around;
}
.m-between {
 justify-content: space-between;
}
.m-center {
 justify-content: center;
}
/* 侧轴方向 */
.s-start {
 align-items: flex-start;
}
.s-end {
 align-items: flex-end;
}

.s-around {
 align-items: space-around;
}
.s-between {
 align-items: space-between;
}
.s-center {
 align-items: center;
}

// pages/calendar/calendar.js

'use strict';

let choose_year = null,
 choose_month = null;
const conf = {
 data: {
 day: '',
 year: '',
 month: '',
 date: '2017-01',
 today: '',
 week: ['日', '一', '二', '三', '四', '五', '六'],
 calendar: {
  first: [],
  second: [],
  third: [],
  fourth: []
 },
 swiperMap: ['first', 'second', 'third', 'fourth'],
 swiperIndex: 1,
 showCaldenlar: false
 },
 onLoad() {
 const date = new Date()
  , month = this.formatMonth(date.getMonth() + 1)
  , year = date.getFullYear()
  , day = this.formatDay(date.getDate())
  , today = `${year}-${month}-${day}`
 let calendar = this.generateThreeMonths(year, month)

 this.setData({
  calendar,
  month,
  year,
  day,
  today,
  beSelectDate: today,
  date: `${year}-${month}`
 })
 },

 showCaldenlar() {
 this.setData({
  showCaldenlar: !this.data.showCaldenlar
 })
 },
 /**
 * 
 * 左右滑动
 * @param {any} e 
 */
 swiperChange(e) {
 const lastIndex = this.data.swiperIndex
  , currentIndex = e.detail.current
 let flag = false
  , { year, month, day, today, date, calendar, swiperMap } = this.data
  , change = swiperMap[(lastIndex + 2) % 4]
  , time = this.countMonth(year, month)
  , key = 'lastMonth'

 if (lastIndex > currentIndex) {
  lastIndex === 3 && currentIndex === 0
  "text-align: center">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。