废话不多说，咱就是直接上代码：
wxml 代码：
<!--pages/rili/rili.wxml--><view class="scroll-view"><scroll-view scroll-left="{{scrollLeftIndex*itemWidth}}" scroll-x scroll-with-animation><view class='item {{index==0?"lef":""}}' style='width:{{itemWidth}}px' wx:for="{{dateList}}" wx:key="key" data-index='{{index}}' bindtap='clickDate'><view class='text-view {{index==clickIndex?"all-choose":""}}'><text class='week {{index==clickIndex?"week-choose":""}}'>{{item.week}}</text><view class='day {{index==clickIndex?"day-choose":""}}'>{{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></view>
js代码：
// pages/rili/rili.jsPage({/*** 页面的初始数据*/data: {dateList: [], //存放日期的数组nowDate: '', //系统当前日期},// 格式化日期，时间formatTime(date) {const year = date.getFullYear()const month = date.getMonth() + 1const 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() + 1var nowDate = myDate.getDate(); //当前是本月几日var today = myDate.toLocaleDateString(); //今日年月日that.setData({nowDate: nowDate,sysmonth: sysmonth}),console.log('系统日期1：', 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 = [];// 当前日期的 往后15天for (let i = 0; i < 15; i++) {let obj = this.getDateInfo(nowDateTime + i * 24 * 60 * 60 * 1000);obj.isChoose = i == 0;dateList.push(obj);}this.setData({dateList,clickIndex: 0,scrollLeftIndex: 15});console.log(this.data.dateList);},// 点击日期方法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]);},})
wxss代码：
/* pages/rili/rili.wxss */.scroll-view {/* height: 200rpx; *//* background-color: #313751; */background-color: #FFFCF6;/* width: 100%; */white-space: nowrap;padding: 36rpx 48rpx;margin: 0 30rpx;}.lef {margin-left: 0;}.item {/* height: 200rpx; */display: inline-block;margin-right: 34rpx;}.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;font-size: 24rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;/* color: #FFFFFF; */line-height: 40rpx;}.day {font-size: 32rpx;width: 52rpx;height: 52rpx;border-radius: 10rpx;/* text-align: center; */line-height: 60rpx;margin-top: 18rpx;background: #fff;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 24rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #363940;line-height: 40rpx;}/* 日期选中的样式 */.all-choose {width: 64rpx;height: 140rpx;background: #363940;border-radius: 60rpx}.week-choose {color: #fff;}.day-choose {/* background-color: #FFB400;color: #fff; */background: #E6D1AD;}
只用上面的代码即可实现，下面的代码我自己看
备份js:
// pages/rili/rili.jsPage({/*** 页面的初始数据*/data: {dateList: [], //存放日期的数组nowDate: '', //系统当前日期},// 格式化日期，时间formatTime(date) {const year = date.getFullYear()const month = date.getMonth() + 1const 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() + 1var 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]);},})
