小程序swiper月份日历滑动

在小程序里用swiper做了一个月份日历，先上图叭直接贴代码叭：

<view class="container">
  <view class="calendar">
            <view class="calendar-head">
                <image src="http://wechat.espot.com.cn/gais/webResource1/staticResource/new/xiangyoujiantou.png?pfdrid_c=true" alt="" data-sign="-1" bindtap="swiperMonth"></image>
                {{month}}月, {{year}}年
                <image src="http://wechat.espot.com.cn/gais/webResource1/staticResource/new/xiangyoujiantou.png?pfdrid_c=true" alt="" data-sign="1" bindtap="swiperMonth" ></image>
            </view>
            <view class="calendar-body">
                <ul class="weeks">
                    <li class="weekend">日</li>
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li class="weekend">六</li>
                </ul>
                <swiper class="swiper days" current="{{ index }}" circular="true" bindchange="change">
                    <swiper-item wx:for="{{ monthList }}" wx:for-item="m">
                        <ul class="days">
                            <li wx:for="{{m.m}}" wx:for-item="d" class="{{d.month != month ? 'gray':''}} {{d.date == now?'now':''}}" data-dt="{{ d }}" bindtap="getDateDetail">
                                <view class="day_date {{d.date == now ? 'now_bgk':''}}  {{ d.is_bgk == 1 ? 'is_bgk' : ''}}">
                                    <text>{{ d.day}}</text>
                                    <view class="circle-df {{d.id ? 'circle':''}}"></view>
                                </view>
                            </li>
                        </ul>
                    </swiper-item>
                </swiper>
            </view>            
        </view>
</view>

css

.calendar { 
	width: 100%;
	padding: 37rpx 33rpx 27rpx 33rpx;
}

.calendar-head { 
	position: relative; 
	padding:8rpx 16rpx;
	font-size: 36rpx;
	font-weight: 500;
	line-height: 50rpx;
	color: #000;
	text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.calendar-head .icon { 
	position: absolute; 
	display:inline-block; 
	width:20rpx;
}
.calendar-head image {
	width: 30rpx;
	height: 30rpx;
}
.calendar-head image:nth-child(1){
	transform: rotate(180deg);
}
.weeks { 
	display: flex; 
	justify-content: center; 
	padding:16rpx 0;
}
.weeks li { 
	display: inline-flex; 
	width:14.2857%;
	justify-content: center; 
	font-size: 24rpx;
}
.weeks .weekend { 
	color:#ffaa71
}

.days { 
	flex-direction: row; 
	flex-wrap: wrap; 
	width: 100%;
	justify-content: space-between;
	height: 500rpx !important;
}
.days li { 
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	box-sizing: border-box; 
	width: 14.2857%;
	min-width: 14.2857%;
	max-width: 14.2857%;
	height: 80rpx;   
	color: #161616;
}
.day_date { 
	width: 81rpx;
	height: 81rpx;
	line-height: 42rpx;
	font-size: 30rpx;
	font-weight: 500;
	text-align: center;
	border-radius: 50%;
	position: relative;

}
.day_date text {
	display: inline-block;
	margin-top: 15rpx;
}
.days .gray { 
	color: darkgray;
}
.now_bgk {
	background: rgba(0, 137, 255, .1);
}
.circle {
	position: absolute;
	top: 61rpx;
    left: 50%;
    margin-left: -6rpx;
	width: 12rpx;
	height: 12rpx;
	border-radius: 24rpx;
	background: #0089FF;
}
.circle-punch {
	position: absolute;
	top: 44rpx;
	left: 26rpx;
	width: 10rpx;
	height: 10rpx;
	border-radius: 20rpx;
	background: #0089FF;
}
.is_bgk {
	background: #0089FF !important;
	color: #fff !important;
}
.is_bgk .circle {
	background: #fff !important;
}
.current { 
	background-image: linear-gradient(-45deg, #3857e3, #567bfd);
	color: #fff;
	font-weight: bold;
}
.swiper { 
	height: 960rpx;
}

const dayjs = require("../../utils/dayjs");

Page({
  data: {
		index: 0, // 初次渲染使用monthList[0]
		sign: null,
		currentDate: '',
		now: dayjs().format('YYYY-MM-DD'),
		month: '',
		year: '',
		monthList: [], // 包含3个元素的数组
		days: [],

		checkDate: '',
		monthCheck: '',
		yearCheck: '',
  },
  onReady: function(){
    this.init();
  },
  onLoad: function () {
    
  },

	swiperMonth(e) {
		let sign = e.currentTarget.dataset.sign;
		let { index } = this.data;
		let cur_index;
	
		if (sign == -1) {
			cur_index = index - 1 < 0 ? 2 : index - 1
		}else {
			cur_index = index + 1 > 2 ? 0 : index + 1
		}
		this.setData({
			sign,
			index: cur_index,
		})
	},
	
	change(e) {
		let current = e.detail.current;
		let source = e.detail.source;
		let { index, currentDate, monthList } = this.data;
	
		// 判断左右滑动方向，修改month
		let flag = null;
		if(!source){
			flag = this.data.sign;
		}else {
			flag = current - index == -2 || current - index == 1 ? 1 : -1;
		}
	
		currentDate = currentDate.add(flag, 'month')
		
		this.setData({
			currentDate,
			year: currentDate.year(),
			month: currentDate.month() + 1,
			day: currentDate.date(),
			index: current
		})
		
		// 滑动后current值，有3种情况需要处理
		if (current == 0)
			monthList = [this.getMonth(0), this.getMonth(1), this.getMonth(-1)]
	
		if (current == 1)
			monthList = [this.getMonth(-1), this.getMonth(0), this.getMonth(1)]
	
		if (current == 2)
			monthList = [this.getMonth(1), this.getMonth(-1), this.getMonth(0)]
	
		this.setData({
			monthList
		})
	
	},
	
	init() {
		// 初始化 日期为今天
		this.setData({
			currentDate: dayjs(),
			checkDate: dayjs(),
		}) 
	
		this.setData({     
			year: dayjs().year(),
			month: dayjs().month() + 1,
			day: dayjs().date(),
			monthList: [this.getMonth(0, 1), this.getMonth(1), this.getMonth(-1)],
	
			monthCheck: dayjs().month() + 1,
			yearCheck: dayjs().year(),
		})
	},
	
	
	getMonth(index) {
		let {
			currentDate,
			year,
			month,
			day
		} = this.data
	
		year = currentDate.year()
		month = currentDate.month() + 1 + index;
		day = currentDate.date()
	
		let first = dayjs(new Date(year, month - 1, 1))
		let arrDays = []
		let preDays = first.day() == 0 ? 7 : first.day();
		
		for (let i = 0 - preDays; i < 42 - preDays; i++) {
			let preDate = first.add(i, 'day');
			let d = preDate.format('YYYY-MM-DD');
	
			arrDays.push({
				date: d,
				day: preDate.format('D'),
				month: preDate.format('M')
			})
		}
	
		return {
			m: arrDays
		}
  },

	getDateDetail(e) {
		console.log(e.currentTarget.dataset);
	},

})

参考
在这位博主上加了左右箭头点击切换。这一版是用day.js做的。日历这个直接用js写的。有点繁琐。但方便理清思路