在小程序里用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写的。有点繁琐。但方便理清思路
