微信小程序原生实现好看的日期选择插件-万年历

今天看见一张比较好看的万年历图，刚好自己也在开发微信小程序，原本想开发成微信小程序组件上传的，结果发现好像行不通，应该是不允许上传组件一类的，反正代码是写出来了。
效果图如下：

左右按钮和左滑右滑可以切换年份。大概代码在下面，复制粘贴到指定文件就行
.wxml 文件如下

<view class="full-screen-date-choose" bindtouchstart='touchstart' bindtouchmove='touchmove' bindtouchend='touchend'><image src="./images/bg.jpg"></image><view class="left" bindtap="lastYear"><text class="left-arrow"></text></view><view class="right" bindtap="nextYear"><text class="right-arrow"></text></view><view class="week"><text>日</text><text>一</text><text>二</text><text>三</text><text>四</text><text>五</text><text>六</text></view><view class="clearView"></view><view class="date" wx:for="{{date}}" wx:for-item="month"><view class="date-title">{{month.year}}年{{month.month}}月</view><view class="month"><view class="week" wx:for="{{month.date}}" wx:for-item="week"><text class="day {{activeDate == (month.year+'-'+month.month+'-'+day)?'active':''}}" bindtap="chooseDate"data-value="{{month.year}}-{{month.month}}-{{day}}" wx:for="{{week}}" wx:for-item="day">{{day}}</text></view></view></view>
</view>

.wxss 样式文件如下

.full-screen-date-choose {font-size: 14px;
}.clearView {height: 40px;margin-top: 3%;
}/* 背景图 */
.full-screen-date-choose image {width: 100vw;height: 100vh;position: fixed;z-index: -1;top: 0;
}/* 顶部周一至周末 */
.full-screen-date-choose>.week {width: 95%;height: 40px;line-height: 40px;background-color: #EBF5FF;border-radius: 3px;color: #9CA6B2;display: flex;justify-content: space-between;box-sizing: border-box;position: fixed;left: 2.5%;top: 2.5%;zoom: 1
}/* 日期选择 */
.full-screen-date-choose .date {width: 95%;margin: 25px auto;
}/* 日期选择顶部年月标题 */
.full-screen-date-choose .date .date-title {text-align: center;font-family: "黑体";font-weight: bold;font-size: 14px;margin-bottom: 20px;
}.full-screen-date-choose .date .date-title::before {content: "";display: inline-block;width: 70px;border: 1px solid #9BB6D2;margin-right: 10px;vertical-align: middle;
}.full-screen-date-choose .date .date-title::after {content: "";display: inline-block;width: 70px;border: 1px solid #9BB6D2;margin-left: 10px;vertical-align: middle;
}.full-screen-date-choose .date .month .week {font-family: '微软雅黑';display: flex;justify-content: space-between;box-sizing: border-box;
}.week text {display: inline-block;height: 40px;line-height: 40px;text-align: center;width: 40px;
}.week text.active {background-color: rgba(0, 0, 0, .5);border-radius: 50%;color: #fff;
}/* 左右箭头 */
.full-screen-date-choose .left {width: 40px;height: 40px;border-radius: 50%;background-color: #fff;text-align: center;line-height: 40px;position: fixed;top: 50%;margin-top: -15px;left: 15px;
}.full-screen-date-choose .left-arrow {display: inline-block;width: 10px;height: 10px;border-top: 2px solid #999;border-right: 2px solid #999;transform: rotate(225deg);
}.full-screen-date-choose .right {width: 40px;height: 40px;border-radius: 50%;background-color: #fff;text-align: center;line-height: 40px;position: fixed;top: 50%;margin-top: -15px;right: 15px;
}.full-screen-date-choose .right-arrow {display: inline-block;width: 10px;height: 10px;border-top: 2px solid #999;border-right: 2px solid #999;transform: rotate(45deg);
}

js文件如下

// plugin/pages/hello-page.js
//触屏开始点坐标
var startDot = {X: 0,Y: 0
};
//触屏到点坐标
var touchDot = {X: 0,Y: 0
};
var time = 0; //触屏时间
var number; //定时器ID
Page({data: {date: [],year: 0,activeDate: ""},onLoad() {let date = new Date();let year = date.getFullYear();this.setData({year})this.calculateValues(year);},//判断每个月1号是周几dayStart(year, month) {let tmpDate = new Date(year, month - 1, 1);return tmpDate.getDay();},//判断每个月有多少天getDate(year, month) {let tmpDate = new Date(year, month, 0);return tmpDate.getDate();},//计算数据calculateValues(year) {//偶尔因为设备性能问题卡一下，我这里用这个提示一下，意思意思wx.showToast({title: '数据渲染中...',icon: "loading",duration: 2000})for (let i = 1; i <= 12; i++) {let days = this.getDate(year, i);let startDay = this.dayStart(year, i);this.insertValues(year, i, days, startDay);}},//填入数据insertValues(year, month, days, startDay) {let date = this.formatDateList(days, startDay);let arr = this.data.date;arr.push({year,month,date});this.setData({date: arr})},//日期列表格式化formatDateList(days, startDay) {startDay -= 1;let num = 1;let allDay = Math.ceil((days + startDay) / 7) * 7;let arr = [],ARRAY = [];for (let i = 0; i < allDay; i++) {if (i < startDay || num > days) {arr.push("");} else {arr.push(num);num++;}}for (let i = 0; i < Math.ceil((days + startDay) / 7); i++) {ARRAY[i] = arr.slice(i * 7, (i + 1) * 7)}return ARRAY;},//选择日期chooseDate(event) {let value = event.currentTarget.dataset.value;let arr = value.split("-");if (arr[2]) {this.setData({activeDate: value})wx.showToast({title: value,icon: 'none',duration: 1000})}},/*** 触屏开始计时和获取坐标*/touchstart: function (event) {startDot.X = event.touches[0].pageX;startDot.Y = event.touches[0].pageY;number = setInterval(function () {time++;}, 100);},/*** 判断滑动距离和时间是否需要切换页面*/touchmove: function (event) {touchDot.X = event.touches[0].pageX;touchDot.Y = event.touches[0].pageY;//向左滑处理if ((startDot.X - touchDot.X) > 200 && (startDot.Y - touchDot.Y) < 150 && time > 0) {this.nextYear();clearInterval(number);time = 0;}//向右滑处理if ((touchDot.X - startDot.X) > 200 && (touchDot.Y - startDot.Y) < 150 && time > 0) {this.lastYear();clearInterval(number);time = 0;}},/*** 结束触屏重置计时*/touchend: function (event) {clearInterval(number);time = 0;},// 下一年nextYear: function () {let year = this.data.year;year++;this.setData({year,date: []})this.calculateValues(year);},// 上一年lastYear: function () {let year = this.data.year;year--;this.setData({year,date: []})this.calculateValues(year);}
})

微信小程序原生实现好看的日期选择插件-万年历相关推荐

微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
微信小程序原生上传图片封装
资源参考组件免费下载地址概述微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）
可在系列教程的基础上继续开发,也可以单独使用 [微信小程序-原生开发]系列教程效果预览代码实现点击触发生成海报在活动详情页,指定点击某图标/按钮,触发跳转到生成海报的页面 pages\comp ...
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
微信小程序原生开发记录
遇到类似 ref 交互的情况所需写法 // wxml<wux-calendar id="wux-calendar" /> // js Page({data: {}, ...
【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
开始前,请先完成首页的开发,详见 [微信小程序-原生开发]实用教程05-首页(含自定义调试模式.插入图片.图文排版.底部留白.添加本地图片) https://blog.csdn.net/weixin_ ...
微信小程序原生开发集成IM服务出现无法找到模块“tim-wx-sdk”的声明文件问题解决
微信小程序原生开发集成IM服务出现无法找到模块"tim-wx-sdk"的声明文件问题解决: 通过npm命令安装配置: 在终端进入到小程序项目根目录执行:npm install 未初 ...
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
【微信小程序-原生开发】实用教程05-首页（含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片）
开始前,请先完成启动/欢迎/首屏广告页的开发,详见 [微信小程序-原生开发]实用教程04-启动/欢迎/首屏广告页(含倒计时.添加文字.rpx.定义变量和函数.读取变量.修改变量.wx.reLaunch ...

微信小程序原生实现好看的日期选择插件-万年历

微信小程序原生实现好看的日期选择插件-万年历相关推荐

最新文章

热门文章