小程序 - swiper滑动日历

最新推荐文章于 2024-08-05 17:14:26 发布

jnChen10

最新推荐文章于 2024-08-05 17:14:26 发布

阅读量1.4k

点赞数 2

分类专栏：小程序

本文链接：https://blog.csdn.net/sinat_33184880/article/details/96145086

版权

本文介绍如何利用swiper组件创建一个可左右滑动的日历。通过维护一个包含三个月日期数据的一维数组，在滑动时动态更新相邻月份，实现日历的无缝切换。详细过程包括初始化设置和滑动时的数据更新策略。

摘要由CSDN通过智能技术生成

通过使用swiper实现可左右滑动的日历

思路：一维数组中，存放三个月的日期数据，每滑动一次，需要更新当前月份前后月份的数据

dayList: [[], [], []]

初始化时，swiper渲染dayList[0]的数据

dayList[0]赋值为当前月份（假设是七月）的数据，因为向右滑是下一个月，所以dayList[1]赋值为下一个月份（八月）的数据；向左滑为上一个月，所以dayList[2]赋值为上一个月份（六月）的数据

当swiper滑到dayList[1]时（向右滑）

此时dayList[1]的数据为（八月），则dayList[0]的数据为上一个月（七月），dayList[2]的数据为下一个月（九月）

当swiper滑到dayList[2]时（再次向右滑）

此时dayList[2]的数据为（九月），则dayList[1]的数据为上一个月（八月），dayList[0]的数据为下一个月（十月）

完整代码：

.wxml

<view class="calendar {
  { showCalender ? 'calendar-active':'' }}">
  <!--  -->
  <view class="cld-title">
    <image 
      class="cld-arrow click-larger" src="../../icon/arrow-left.png" 
      catchtap='monthSwiper' data-flag="0"
    >
    </image>
    {
  { dateTip }}
    <image 
      class="cld-arrow click-larger" src="../../icon/arrow-right.png" 
      catchtap='monthSwiper'
    >
    </image>
  </view>
  <!--  -->