小程序实现日历左右滑动效果


Posted in Javascript onOctober 21, 2019

本文实例为大家分享了小程序日历左右滑动效果的具体代码,供大家参考,具体内容如下

效果图

小程序实现日历左右滑动效果

小程序实现日历左右滑动效果

小程序实现日历左右滑动效果

wxml

<scroll-view class="scroll-view" scroll-left="{{scrollLeftIndex*itemWidth}}" scroll-x scroll-with-animation>
 <view class='item' style='width:{{itemWidth}}px' wx:for="{{dateList}}" data-index='{{index}}' bindtap='clickDate'>
 <view class='text-view'>
 <view class='day {{index==clickIndex?"day-active":""}}'>{{item.day}}</view>
 <text class='month'>{{item.month}}月</text>
 <view wx:if="{{item.month == sysmonth && item.day == nowDate}}">
 <text class='week'>今日</text>
 </view>
 <view wx:else>
 <text class='week'>{{item.week}}</text>
 </view>
 </view>
 </view>
</scroll-view>

js

// byjs_sun/pages/product/all/all.js
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 dateList:[], //存放日期的数组
 nowDate:'', //系统当前日期
 },
 // 格式化日期,时间
 formatTime(date) {
 const year = date.getFullYear()
 const month = date.getMonth() + 1
 const day = date.getDate()
 const hour = date.getHours()
 const minute = date.getMinutes()
 const second = date.getSeconds()
 return [year, month, day].map(this.formatNumber).join('/') + ' ' + [hour, minute, second].map(this.formatNumber).join(':')
 },
 // 格式化数字
 formatNumber(n) {
 n = n.toString()
 return n[1] ? n : '0' + n
 },
 
 // 获取日期详情
 getDateInfo(ts) {
 const date = new Date(ts);
 const weekArr = new Array("日", "一", "二", "三", "四", "五", "六");
 const week = date.getDay();
 let dateString = this.formatTime(date);
 let shortDateString = dateString.replace(/\//g, '-').substring(5, 10).replace(/-/g, '月') + "日";
 if (date.getDate() < 10) {
 shortDateString = shortDateString.replace(/0/g, '');
 }
 return {
 shortDateString,
 dateString,
 month: date.getMonth() + 1,
 day: date.getDate(),
 week: weekArr[week]
 }
 },
 
/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this;
 var myDate = new Date(); //获取系统当前时间
 var sysmonth = myDate.getMonth() + 1
 var nowDate = myDate.getDate(); //当前是本月几日
 var today = myDate.toLocaleDateString(); //今日年月日
 that.setData({
 nowDate: nowDate,
 sysmonth: sysmonth
 }),
 console.log('系统日期:',myDate);
 console.log('系统日期(年/月/日):',today);
 console.log('系统日期(月):', sysmonth);
 console.log('系统日期(日):', nowDate);
 
 // 获取屏幕宽度,设置每个日期宽度
 wx.getSystemInfo({
 success: (res) => {
 console.log(res);
 this.setData({
 windowWidth: res.windowWidth,
 itemWidth: parseInt(res.windowWidth / 7)
 });
 },
 })
 this.initData();
 },
 
 // 初始化日期
 initData() {
 const nowDateTime = +new Date();
 let dateList = [];
 for (let i = -30; i < 30; i++) {
 let obj = this.getDateInfo(nowDateTime + i * 24 * 60 * 60 * 1000);
 obj.isChoose = i == 0;
 dateList.push(obj);
 }
 this.setData({
 dateList,
 clickIndex: 30,
 scrollLeftIndex: 30
 
 });
 },
 
 // 点击日期方法
 clickDate(e) {
 var that = this;
 console.log('点击日期携带的下标:', e.currentTarget.dataset.index); //当前的点击的日期
 var index = e.currentTarget.dataset.index;
 that.setData({
 clickIndex: index
 });
 // console.log(that.data.scrollLeftIndex);
 console.log('当前点击日期:',that.data.dateList[index].shortDateString); //当前点击的日期
 
 // const {
 // index
 // } = e.currentTarget.dataset;
 // this.setData({
 // clickIndex: index
 // });
 // console.log(this.data.dateList[index]);
 },
})

样式

.scroll-view {
 height: 200rpx;
 background-color: #313751;
 width: 100%;
 white-space: nowrap;
}
.item {
 height: 200rpx;
 display: inline-block;
}
.text-view {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 width: 100%;
 height: 100%;
 color: #fff;
}
.month {
 font-size: 30rpx;
 margin-top: 10rpx;
}
.week {
 font-size: 32rpx;
 margin-top: 10rpx;
}
.day {
 font-size: 32rpx;
 width: 60rpx;
 height: 60rpx;
 border-radius: 10rpx;
 text-align: center;
 line-height: 60rpx;
 margin-top: 20rpx;
}
/* 日期选中的样式 */
.day-active {
 background-color: #FFB400;
 color: #fff;
}

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
javascript读写json示例
Apr 11 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
javascript填充默认头像方法
Feb 22 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 #Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 #Javascript
小程序实现横向滑动日历效果
Oct 21 #Javascript
微信小程序实现点击图片放大预览
Oct 21 #Javascript
vue实现Input输入框模糊查询方法
Jan 29 #Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 #Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 #Javascript
You might like
php 设计模式之 工厂模式
2008/12/19 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
yii添删改查实例
2015/11/16 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
Python从MP3文件获取id3的方法
2015/06/15 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Django如何批量创建Model
2020/09/01 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
运动会致辞稿50字
2014/02/04 职场文书
网络工程师职业规划
2014/02/10 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
团日活动总结格式
2015/05/11 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python