微信小程序swiper实现滑动轮播日历效果

微信小程序swiper实现滑动轮播日历效果

简要

经过网上不断搜索，查不出所需要的滑动轮播效果，索性自己写一个。它可以定位到当前月份、可在代码设置所需的往前滑动月份数量和往后滑动月份数量，然后滑动地选择日历，比如点击某一个月，您可以根据业务需要，切换地展示相应的信息。

先看效果

直接上代码

wxml

<view class="container">
  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper interval="{{interval}}" previous-margin="120px" next-margin="120px" display-multiple-items="1" bindchange="dateSwiperChange" current="{{swiperCurrent}}" style='height:156rpx'>
        <block wx:for="{{dates}}" wx:key="index" wx:for-item="item">
          <swiper-item>
            <view class="swiper-item demo-text-3" style='display:flex;background-color:{{firstIndex?(index==swiperCurrent?"#BFA456":"#1A3B64"):(clickIndex==index?"#BFA456":"#1A3B64")}} ;color: {{firstIndex?(index==swiperCurrent?"#FFFFFF":"#92ACC8"):(clickIndex==index?"#FFFFFF":"#92ACC8")}};'
              bindtap='clickDate' id="{{index}}">
              <text style='font-size:24rpx;margin-top:-40rpx'>
              {{item.year}}年
            </text>
              <text style='font-size:32rpx;font-weight:bold;margin-top:-40rpx'>
              {{item.month}}月
            </text>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
  </view>

wxss

page{
  background-color: #EAECED;
}
.page-body{
  /* padding-top: 34rpx; */
  background-color: #1A3B64;
   box-shadow:6rpx 6rpx 6rpx 4rpx grey;
}
.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}
.page-section_center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-section:last-child{
  margin-bottom: 0;
}
.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-section-spacing{
  box-sizing: border-box;
  padding: 0 20rpx;
}
.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  
}
.page-section-gap .page-section-title{
  padding-left: 0;
  padding-right: 0;
}

.demo-text-3{
  
  top: 50rpx;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  /* width: 100rpx;
  height: 50rpx; */
  /* position: relative; */
  align-items: center;
  justify-content: center;
  
  font-size: 36rpx;
border-width: 2rpx;
border-style: solid;
border-color: #92ACC8;
flex-direction: column;
}
button{
  margin-bottom: 30rpx;
}
button:last-child{
  margin-bottom: 0;
}
.page-section-title{
  padding: 0;
}
.swiper{
  height: 156rpx;
}
.swiper-item{
  display: block;
  height: 120rpx;
  width:200rpx;
}
.page-section-title{
  margin-top: 20rpx;
  position: relative;
}
.info{
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}
.itemContent{
  width: 860rpx;
  height: 140rpx;
  margin-left: 16rpx;
  margin-right: 16rpx;
  background-color: white;
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  box-shadow:2rpx 2rpx 2rpx 2rpx grey;
}
.itemDate{
  width: 140rpx;
  height: 140rpx;
  background-color: #CB1E36;
display: flex;
justify-content: center;
  flex-direction: column;
border-radius: 4rpx 0rpx 0rpx 4rpx;
}
.daydate{
  display: flex;
  font-size: 28rpx;
  color: white;
  font-weight: bold;
  width: 140rpx;
  height: 40rpx;
  /* flex-direction: column; */
  justify-content: center;
  margin-top: 10rpx;
}
.week{
  display: flex;
  font-size: 22rpx;
  color: white;
  width: 140rpx;
   height: 40rpx;
  justify-content: center;
  margin-top: 6rpx;
}
.text-verb{
  font-size: 32rpx;
  margin-left: 30rpx;
}
.text-address{
  font-weight: bold;
}
.noplanimg{
  width:200rpx;
  height:200rpx;
  margin-left:280rpx;
  margin-top:252rpx;
}
.noplantext{
  font-size: 28rpx;
  color: #B3B3B3;
  display: flex;
  justify-content: center;
  align-content: center;
}
.icon-list{
/* width:470rpx; */
width:528rpx;
height:30rpx;
/* background-color: red; */
margin-top:27rpx;
/* margin-left:31rpx; */
margin-left:-27rpx;
}
.icon-element{
margin-left:58rpx;
margin-bottom:0rpx;
width:31rpx;
height:30rpx;
/* background-color: black; */
float:left;
}
.icon-img{
  width:26rpx;
  height:28rpx;
}
.page-foot{
  margin-top: 50rpx;
}
.arrow{
  width: 15rpx;
  height: 30rpx;
  margin-top: 54rpx;
  margin-left: 56rpx;
}

js

Page({
  data: {
    dates: '',
    firstIndex:true,
    clickIndex:''
  },

  onLoad() {
    let date = new Date()
    let current = 0
    let dates = this.caculateDate(date)
    for (let i = 0; i < dates.length; i++) {
      if (date.getMonth() + 1 == dates[i].month) {
        current = i
        break
      }
    }
    this.setData({
      dates: dates,
      swiperCurrent: current
    })
    
  },
  dateSwiperChange(e) {
    console.log(e.detail.current)
    //this.setData({ swiperCurrent: e.detail.current})
      
  },
  caculateDate(date) {
    let dates = []
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let preDate = {}
    if ((month - 1) % 12 == 0) {
      preDate.year = year - 1
      preDate.month = 12
    } else {
      preDate.year = year
      preDate.month = month - 1
    }
    dates.push(preDate)
    for (let i = month; i <= month + 11; i++) {
      let afterDate = {}
      if (i / 12 > 1) {
        afterDate.year = year + 1
        afterDate.month = i % 12
      } else {
        afterDate.year = year
        afterDate.month = i % 12 == 0 ? 12 : i % 12
      }
      dates.push(afterDate)
    }
    return dates
  },
  clickDate(e){
    console.log(typeof e.currentTarget.id)
    this.setData({
      firstIndex:false,
      clickIndex: parseInt(e.currentTarget.id),
      swiperCurrent: parseInt(e.currentTarget.id)
    })
    
  }
})

代码简单，直接可用，原创文章，允许转载分享。但请转载请一定标明出处。