微信小程序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)
})
}
})