微信小程序实现滑动日历

Posted 2020-11-26 圣诞。

先看成品

 

 

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文件中的代码

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;

}