小程序 日曆 左右滑動

效果圖

 

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;
}