微信小程序自定义可滑动日历界面

本文实例为大家分享了微信小程序可滑动日历界面的具体代码，供大家参考，具体内容如下

参考某个博主的自定义控件做了一些改动，希望这篇博客能帮助需要的人。

WXML

<view class='container'><view class='month flex m-around'> <view class='arrow' bindtap='prevMonth'>《 </view> <view class='year-and-month'>  <picker mode="date" value="{{date}}" start="2015-09" end="2020-09" fields='month' bindchange="bindDateChange">  <view>   {{date}}  </view>  </picker> </view> <view class='arrow' bindtap='nextMonth'> 》</view></view><view class='calendar flex column s-center'> <view class='week-row flex m-around'> <view class='grid' wx:for="{{week}}" wx:key='item'>{{item}}</view> </view> <swiper class='swpier-box' circular="true" current="{{swiperIndex}}" bindchange='swiperChange'> <swiper-item class='flex m-around days-table '>  <view wx:for="{{calendar.first}}" wx:for-item='x' wx:key='x.date'  class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>  <view>{{x.date === today?'今天':x.day}}</view>  </view> </swiper-item> <swiper-item class='flex m-around days-table '>  <view wx:for="{{calendar.second}}" wx:for-item='x' wx:key='x.date'  class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' data-test='{{(year + "-" +month + "-" + day)}}' bindtap='bindDayTap'>  <view>{{x.date === today?'今天':x.day}}</view>  </view> </swiper-item> <swiper-item class='flex m-around days-table'>  <view wx:for="{{calendar.third}}" wx:for-item='x' wx:key='x.date'  class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>  <view>{{x.date === today?'今天':x.day}}</view>  </view> </swiper-item> <swiper-item class='flex m-around days-table '>  <view wx:for="{{calendar.fourth}}" wx:for-item='x' wx:key='x.date'  class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>  <view>{{x.date === today?'今天':x.day}}</view>  </view> </swiper-item> </swiper></view></view>

CSS

/* 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;}