小程序日期横向滚动选择

Posted 2022-05-18 未名胡

wxml

    <scroll-view class="scroll-view" scroll-left="scrollLeftIndex*itemWidth" scroll-x scroll-with-animation>
        <view class='item' style='width:itemWidthpx' 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>
   <view  class='text-view-all clickIndex=="-1"?"text-view-all-active":""'  bindtap='clickDate' data-index="-1">全部index</view>

xcss

.scroll-view 
  top:0rpx;
  height: 200rpx;
  background-color: #03AAFD;
  width: 90%;
  white-space: nowrap;
  float: left;
  position:fixed;
  z-index: 999;


.text-view-all 
  top:0rpx;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #03AAFD;
  width: 10%;
  height: 100%;
  color: #fff;
  height: 200rpx;
  margin-left: 90%;
  position:fixed;
  z-index: 999;


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

.text-view-all-active
  background-color: #FFB400;
  color: #fff;

js

Page(

  /**
   * 页面的初始数据
   */
  data: 
    dateList: [], //存放日期的数组
    nowDate: '', //系统当前日期
  ,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) 
    this.getTime();
  ,
  getTime()
    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
      ),
      wx.getSystemInfo(
        success: (res) => 
          console.log(res);
          this.setData(
            windowWidth: res.windowWidth,
            itemWidth: parseInt(res.windowWidth / 7)
          );
        ,
      )
      that.initData();
  ,

  // 初始化日期
  initData() 
    const nowDateTime = +new Date();
    let dateList = [];
    for (let i = -32; i < 1; i++) 
      let obj = this.getDateInfo(nowDateTime + i * 24 * 60 * 60 * 1000);
      obj.isChoose = i == 0;
      dateList.push(obj);
    
    let lastDate = this.getDateInfo(nowDateTime + -32 * 24 * 60 * 60 * 1000)
    let nowDate = this.getDateInfo(nowDateTime + 0 * 24 * 60 * 60 * 1000)
    this.newLastDate = lastDate.dateString.substring(0, 10).replaceAll('/', '-') + ' ' + '00:00:00'
    this.newNowDate = nowDate.dateString.substring(0, 10).replaceAll('/', '-') + ' ' + '23:59:59'
    this.setData(
      dateList,
      clickIndex: -1,
      scrollLeftIndex: 30
    );
  ,
  // 点击日期方法
  clickDate(e) 
    var that = this;
    const nowDateTime = +new Date();
    let currentDate = this.getDateInfo(nowDateTime + (e.currentTarget.dataset.index -1 - 32) * 24 * 60 * 60 * 1000)
    let currentDate1 = this.getDateInfo(nowDateTime + (e.currentTarget.dataset.index - 32) * 24 * 60 * 60 * 1000)
    this.newLastDate = currentDate.dateString.substring(0, 10).replaceAll('/', '-') + ' ' + '23:59:59'
    this.newNowDate = currentDate1.dateString.substring(0, 10).replaceAll('/', '-') + ' ' + '23:59:59'
    if (e.currentTarget.dataset.index == '-1') 
      let lastDate = this.getDateInfo(nowDateTime + -32 * 24 * 60 * 60 * 1000)
      let nowDate = this.getDateInfo(nowDateTime + 0 * 24 * 60 * 60 * 1000)
      this.newLastDate = lastDate.dateString.substring(0, 10).replaceAll('/', '-') + ' ' + '00:00:00'
      this.newNowDate = nowDate.dateString.substring(0, 10).replaceAll('/', '-') + ' ' + '23:59:59'
    
    console.log(this.newLastDate + "-" + this.newNowDate);
  
    var index = e.currentTarget.dataset.index;
    that.setData(
      newLastDate:this.newLastDate,
      newNowDate:this.newNowDate,
      clickIndex: index
    );
   // that.getTrajectory();
  ,
    // 格式化日期，时间
    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]
      
    ,
  
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () 

  ,

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () 

  ,

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () 

  ,

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () 

  ,

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () 

  ,

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () 

  ,

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () 

  
)