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


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 parseInt 大改造
Sep 27 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
jquery animate动画持续运动的实例
Nov 29 jQuery
微信小程序实现联动选择器
Feb 15 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
微信小程序基础教程之echart的使用
Jun 01 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
最省空间的计数器
2006/10/09 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
vue内置指令详解
2018/04/03 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
python3 发送任意文件邮件的实例
2018/01/23 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
.net笔试题
2014/03/03 面试题
《猴子种果树》教学反思
2014/04/26 职场文书
爱与责任演讲稿
2014/05/20 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
高中班主任评语
2014/12/30 职场文书
工作推荐信模板
2015/03/25 职场文书