微信小程序:实现左右滑动的日历组件效果

效果如下

 

微信小程序:实现左右滑动的日历组件效果

 使用<swiper></swiper>实现左右滑动效果,设置swiper 属性circular 为循环,使月份数据在3个swiper-item中轮流播放,思路如下

m 当为前月,swiper当前所在滑块的下标为 index ,index默认1,页面可以左右滑动

微信小程序:实现左右滑动的日历组件效果

当左右滑动时,页面数组数据和对应滑块的下标关系如下 :

index==1 时:[m-1,m,m+1] 

index==2 时:[m+1,m-1,m]

index== 0 时:[m,m+1,m-1]

查看代码片段,此代码片段只展示基本的日历切换效果

上一篇:tabsSwiper 全屏选项卡(uniapp-uView)


下一篇:设计模式——组合模式