微信小程序日历左滑右滑特效

自己写了个小程序左滑右滑的特效，可以用来左右切换日历，日历的渲染很简单，参考电脑的日历位置摆放好即可，在此我只写出滑动特效的代码，以供参考。

一、datepicker.wxml的页面结构

    左右滑动页面试一下效果
    
        
        
            
                {{currentDate}}
            
            
                {{currentDate}}
            
        
    

二、datepicker.wxss的样式

/* 例子的样式 */
.container {
    font-size: 28rpx;
    background: #f8f8f9;
    height: 100%;
    min-height: 100%;
}

.layout_header {
    padding: 20rpx 20rpx;
    margin: 30rpx;
    background: #fff;
    box-shadow: 0px 0px 10rpx #e9eaec;
    border-radius: 8rpx;
    text-align: center;
}

.layout_body {
    padding: 30rpx;
}

/* 日期样式 */
.layout_body .date_container {
    background: #fff;
    box-shadow: 0px 0px 10rpx #e9eaec;
    border-radius: 8rpx;
    text-align: center;
    position: relative;
    height: 520rpx;
    line-height: 520rpx;
    font-size: 32rpx;
    font-weight: bold;
    overflow: hidden;
}

.layout_body .date_container .date_box2 {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
}

/* 滑动的动画 */
.animated {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

三、datepicker.js的写法

// 自定义工具函数
var utils = {
  digit: function (n) {
    if (n == null || n === "" || n == undefined) {
      return "";
    } else {
      n = n.toString();
      return n[1] ? n : '0' + n;
    }
  },
  formatDate: function (date = new Date()) {
    // 年月日
    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    // 返回值
    return [year, this.digit(month), this.digit(day)].map(this.digit).join('-');
  }
}

// Page
Page({
  data: {
    // 左右滑动的class样式
    slideOne: "",
    slideTwo: "",
    // 左右滑动定义的状态变量
    slideFlag: false,

    // 页面输出的数据
    currentDate: utils.formatDate(),
  },

  onLoad: function () {},
  /**
   * 日历滑动的特效处理函数
   */
  touchStart(e) {
    this.setData({
      startX: e.changedTouches[0].pageX
    })
  },
  touchEnd(e) {
    if (!this.data.slideFlag) {
      this.setData({
        slideFlag: true,
        endX: e.changedTouches[0].pageX
      })
      let disX = e.changedTouches[0].pageX - this.data.startX;
      if (disX < -60) {
        console.log("左滑")
        this.setData({
          slideOne: "animated fadeOutLeft",
          slideTwo: "animated fadeInRight"
        })
        setTimeout(() => {
          this.tapNext();
        }, 300);
        setTimeout(() => {
          this.setData({
            slideFlag: false,
            slideOne: "",
            slideTwo: ""
          })
        }, 800);
      } else if (disX > 60) {
        console.log("右滑")
        this.setData({
          slideOne: "animated fadeOutRight",
          slideTwo: "animated fadeInLeft"
        })
        setTimeout(() => {
          this.tapPrev();
        }, 300);
        setTimeout(() => {
          this.setData({
            slideFlag: false,
            slideOne: "",
            slideTwo: ""
          })
        }, 800);
      } else {
        this.setData({
          slideFlag: false
        })
      }
    }
  },
  /**
   * 左右滑动调用的函数
   */
  tapPrev() {
    let date = new Date(this.data.currentDate);
    date.setMonth(date.getMonth() - 1);
    this.setData({
      currentDate: utils.formatDate(date)
    })
  },
  tapNext() {
    let date = new Date(this.data.currentDate);
    date.setMonth(date.getMonth() + 1);
    this.setData({
      currentDate: utils.formatDate(date)
    })
  }
})

以上粘贴到小程序对应的文件里，可以运行起来，最后附一张gif动态图看一下展示效果