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

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

一、datepicker.wxml的页面结构

<view class="container"><view class="layout_header">左右滑动页面试一下效果</view><view class="layout_body"><!-- 这里用 bindtouchstart 和 bindtouchend 两个事件来控制滑动的 --><view class="date_container" bindtouchstart="touchStart" bindtouchend="touchEnd"><view class="date_box1 {{slideOne}}">{{currentDate}}</view><view class="date_box2 {{slideTwo}}">{{currentDate}}</view></view></view>
</view>

二、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() + 1var 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动态图看一下展示效果

微信小程序日历左滑右滑特效相关推荐

php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
适配mpvue平台的的微信小程序日历组件mpvue-calendar
mpvue-calendar 基于vue-calendar的适配mpvue平台的的微信小程序日历组件预览安装 npm i mpvue-calendar 使用 import Calendar fro ...
微信小程序居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局
微信小程序居中.居右.横纵布局 1.水平垂直居中(相对父类控件) 方式一:水平垂直居中父类控件: display: flex;align-items: center;//子控件垂直居中justify ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
python日历小程序_微信小程序日历效果
本文实例为大家分享了微信小程序日历效果的具体代码,供大家参考,具体内容如下源码下载地址项目需要一个日历功能,花了一天时间实现的微信小程序日历,js大小只有几k,引入了bootstrap字体图标(文 ...
微信小程序日历加课表项目
最近花了不少时间做了个微信小程序,期间遇到了挺多技术问题的,写个博客记录一下,我先上小程序使用图片! 1.进入小程序首先要登录才能添加行程和查看行程 2.登录成功后 3.首页日历日期是可点击,点击后是 ...
微信小程序日历签到组件(原创)
微信小程序日历签到组件(原创) 开发原因: 为满足定制需要,市面上又找不到车子和轮子,干脆自己撸了并开源分享有需要的人用其他说明: 该组件js日期均已使用yyyy/MM/dd格式连接解决ios不兼容 ...
微信小程序日历（公历）
微信小程序日历(公历) 周六加班的时候,突然想看看日历是怎么实现的,就试着写了一下. --------------------------分割线-------------------------- J ...

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

微信小程序日历左滑右滑特效相关推荐

最新文章

热门文章