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


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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
详解React中的组件通信问题
Jul 31 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
vue 弹出遮罩层样式实例
Jul 22 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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
教你安装python Django(图文)
2013/11/04 Python
python reduce 函数使用详解
2017/12/05 Python
Python中作用域的深入讲解
2018/12/10 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python中base64与xml取值结合问题
2019/12/22 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
采用怎样的方法保证数据的完整性
2013/12/02 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
大学新生军训感言
2014/02/25 职场文书
项目申请汇报材料
2014/08/16 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
JavaCV实现照片马赛克效果
2022/01/22 Java/Android