微信小程序之实现常用日期格式-月历滑动格式（三）

太过爱你忘了你带给我的痛 2022-12-07 15:19 332阅读 0赞

### 前言概述 ###

本文介绍项目中常用到的日期格式--月历滑动格式，顶部显示当前月的月历，默认选择当天的日期，且能滑动月历选择需要的日期：

![20200916165453855.gif][]

### 实现过程 ###

1. 先实现页面效果，文件\*.wxml和\*.wxss代码如下：

1）滑动功能使用组件scroll-view，样式实现参考下面代码；为了实现加载时默认选择当天的日期，可使用组件属性scroll-into-view，属性值“toView”需用setData设置，不然不起作用；

2）item.isDisable ? 'opacity30' : (item.year === selectDay.year && item.month === selectDay.month && item.day === selectDay.day?'select':'')的实现原理，判断是否有效期（isDisable ），非有效期增加'opacity30'实现透明度30%效果；而有效期判断是否被选中，选中则增加'select'实现高亮效果；

<view class="container">
    	<view class="tabs-box">
    		<scroll-view class="time-tabs" scroll-x scroll-into-view="{
       {toView}}" scroll-with-animation>
    			<view wx:for="{
       {list}}" wx:key="index" class="day {
       {item.isDisable ? 'opacity30' : (item.year === selectDay.year && item.month === selectDay.month && item.day === selectDay.day?'select':'')}}" catchtap="selectChange" data-day="{
       {item.day}}" data-year="{
       {item.year}}" data-month="{
       {item.month}}" data-date-string="{
       {item.dateString}}" data-week-day="{
       {item.weekDay}}" data-isdisable="{
       {item.isDisable}}" id="{
       {item.id}}">
    				<view class="month">{
       {item.year}}-{
       {item.month}}</view>
    				<view class="text {
       {item.isWeekend ? 'orange' : ''}}">
    					{
       {item.day}}
    				</view>
    				<view class="week">{
       {item.week}}</view>
    			</view>
    		</scroll-view>
    		<view class="remark"><text>滑动选择更多日期</text></view>
    	</view>
    	<view class="timeList">
    		<view class="table">
    			<view class="tr title">
    				<view class="th first">时间段</view>
    				<view class="th center">剩余数</view>
    				<view class="th last">操作</view>
    			</view>
    			<scroll-view scroll-y="true" style="height: {
       {clientHeight?clientHeight-tabsBoxHeight-titleHeight+'px':'auto'}}">
    				<view class="tr septalLine" wx:for="{
       {timeList}}" wx:key="id">
    					<view class="td first">{
       {item.time}}</view>
    					<view class="td center">{
       {item.bookingNumber}}</view>
    					<view class="td last">预约</view>
    				</view>
    			</scroll-view>
    		</view>
    	</view>
    </view>

/* 日期选择 */
    .tabs-box {
      height: 228rpx;
    }
    .time-tabs {
      white-space: nowrap;
    }
    
    .time-tabs .day {
      display: inline-block;
      width: 150rpx;
      height: 170rpx;
      text-align: center;
      position: relative;
      font-size: 26rpx;
      border: 2rpx solid #E6E6E6;
    }
    
    .time-tabs .day.opacity30 {
      opacity: 0.3;
    }
    
    .time-tabs .day .month {
      color: #E6E6E6;
      padding: 10rpx 0 14rpx;
    }
    
    .time-tabs .day .text {
      font-size: 32rpx;
      color: #343434;
      font-weight: bold;
    }
    
    .time-tabs .day .week {
      color: #999;
      background-color: #F0F3F5;
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      padding: 8rpx 0;
    }
    
    .time-tabs .day .orange {
      color: #FA7014;
    }
    
    .time-tabs .day.select {
      border-color: #3E7AF5;
    }
    
    .time-tabs .day.select .month, .time-tabs .day.select .text {
      color: #3E7AF5;
    }
    
    .time-tabs .day.select .week {
      color: #fff;
      background-color: #3E7AF5;
    }
    
    .remark {
      color: #9A9A9A;
      font-size: 26rpx;
      text-align: center;
      margin-top: 20rpx;
    }
    
    .remark image {
      width: 32rpx;
      height: 14rpx;
      vertical-align: middle;
      margin-top: -6rpx;
    }
    
    .remark text {
      margin: 0 6rpx
    }
    
    /* 预约时间列表 */
    .table {
      padding: 0 30rpx;
    }
    
    .table .tr {
      display: flex;
      padding: 40rpx 0 30rpx;
    }
    
    .table .tr .th {
      color: #666;
      margin-bottom: 10rpx;
    }
    
    .table .tr .th, .table .tr .td {
      text-align: center;
    }
    
    .table .tr .td {
      font-size: 32rpx;
      color: #343434;
    }
    
    .table .tr .first {
      width: 188rpx;
    }
    
    .table .tr .center {
      flex: 1;
    }
    
    .table .tr .last {
      width: 120rpx;
    }
    
    .table .tr .td.last {
      height: 60rpx;
      line-height: 60rpx;
      border: 2rpx solid #3E7AF5;
      color: #3E7AF5;
      border-radius: 8rpx;
      font-size: 28rpx;
      margin-top: -12rpx;
    }

2. 接下来实现交互逻辑，文件\*.js代码实现如下：

1）dateInit函数用于获取渲染的日历主体信息和所需要的data各种数据；

2）onLoad实现获取当天日期并渲染主体数据，加了判断是否选中过日期来变化高亮日期天数；并计算日期列表的高度，实现只滚动日期列表，不影响滑动切换日期和查看标题；

3）selectChange函数用于点击后把选中日期数据，如果要实现选中不同日期显示不同的日期列表，可在这里增加传参数调接口获取数据后替换timeList的数据。

import util from '../../utils/util.js'
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        tabsBoxHeight: 0, // 时间选择高度
        titleHeight: 0, // 时间列表高度
        clientHeight: 0, //可视区域高度
        nowDay: {}, // 今天日期
        selectDay: {}, // 选中时间
        list: [],
        toView: 't1', // 用于定位滚动位置
        timeList: [{
          id: 1,
          time: '08:30-09:00',
          bookingNumber: 4
        }, {
          id: 2,
          time: '09:00-09:30',
          bookingNumber: 10
        }, {
          id: 3,
          time: '09:00-09:30',
          bookingNumber: 10
        }, {
          id: 4,
          time: '09:00-09:30',
          bookingNumber: 10
        }, {
          id: 5,
          time: '09:00-09:30',
          bookingNumber: 10
        }, {
          id: 6,
          time: '09:00-09:30',
          bookingNumber: 10
        }, {
          id: 7,
          time: '09:00-09:30',
          bookingNumber: 10
        }]
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // 计算时间高度
        let that = this;
        this.nodeHeight('.tabs-box', 'tabsBoxHeight');
        this.nodeHeight('.tr.title', 'titleHeight');
        console.log(this.data)
        wx.getSystemInfo({
          success: function (res) {
            console.log(res.windowHeight)
            that.setData({
              // 可视区域高度
              clientHeight: res.windowHeight
            });
          }
        });
    
        // 获取当前日期信息
        let now = new Date();
        let month = now.getMonth() + 1;
        month = month >= 10 ? month : '0' + month;
        let day = now.getDate();
        day = day >= 10 ? day : '0' + day;
        let nowDay = {
          year: now.getFullYear(),
          month,
          day
        }
        let selectDay = nowDay;
        this.setData({
          nowDay,
          selectDay
        });
        this.dateInit(nowDay.year, nowDay.month);
      },
      // 日历主体的渲染方法
      dateInit(setYear, setMonth) {
        // 循环月数据
        let now = new Date(setYear, setMonth - 1); // 当前月份的1号
        let dayNum = new Date(setYear, setMonth, 0).getDate(); // 当前月有多少天
    
        let list = [];
        let toView;
        for (let j = 0; j < dayNum; j++) {
          const now2 = new Date(now);
          now2.setDate(j + 1);
    
          let obj = {};
          let day = now2.getDate();
          day = day >= 10 ? day : '0' + day; // 补0
    
          let month = now2.getMonth() + 1;
          month = month >= 10 ? month : '0' + month; // 补0
    
          let year = now2.getFullYear();
          let weekDay = now2.getDay();
          let week = util.getWeeks(weekDay);
          let nowDay = this.data.nowDay;
          let isDisable;
          // 用于判断本月小于今天，下个月大于今天的日期不能选择
          if (month == nowDay.month) {
            isDisable = (day < nowDay.day) ? true : false;
          } else {
            isDisable = (day >= nowDay.day) ? true : false;
          }
          // 获取今天的id前两个数字     
          if (day == nowDay.day) {
            toView = 't' + (j - 2);
          }
    
          obj = {
            id: 't' + j,
            day,
            month,
            year,
            weekDay,
            week,
            dateString: util.formatTime(now2),
            isWeekend: (weekDay === 0 || weekDay === 6) ? true : false, // 是否周末
            isDisable
          };
          list[j] = obj;
        }
        this.setData({
          list,
          toView // 赋值需定位的位置
        })
      },
      // 一天被点击时
      selectChange(e) {
        const weekDay = e.currentTarget.dataset.weekDay;
        const isDisable = e.currentTarget.dataset.isdisable;
        // 非有效期不能预约
        if (isDisable) {
          util.showToast('请选择有效期', 'none');
          return false;
        }
        // 周末不能预约
        if (weekDay === 0 || weekDay === 6) {
          util.showToast('请选择非休息日', 'none');
          return false;
        }
        // 获取星期几
        let weeks = util.getWeeks(weekDay);
    
        const year = e.currentTarget.dataset.year
        const month = e.currentTarget.dataset.month
        const day = e.currentTarget.dataset.day
        const dateString = e.currentTarget.dataset.dateString
        const selectDay = {
          year: year,
          month: month,
          day: day,
          dateString: dateString + ' ' + weeks
        }
        this.setData({
          selectDay: selectDay
        });
      },
      // 获取节点高度
      nodeHeight(nodeName, nodeHeight) {
        let that = this;
        var query = wx.createSelectorQuery();
        query.select(nodeName).boundingClientRect();
        query.exec(function (res) {
          switch (nodeHeight) {
            case 'tabsBoxHeight':
              that.setData({
                tabsBoxHeight: res[0].height
              });
              break;
            case 'titleHeight':
              that.setData({
                titleHeight: res[0].height
              });
              break;
          }
        });
      }
    })

![20200916171801701.jpg][]

[20200916165453855.gif]: /images/20221123/1ef6f79f98d0457697bea538f4c17071.png
[20200916171801701.jpg]: /images/20221123/200041407e654b19aeba674c7f767c82.png