微信小程序实现时间轴

本文实例为大家分享了微信小程序实现时间轴的具体代码，供大家参考，具体内容如下

一、显示样式

二、代码

1.wxml：

<view class="header">
 <view class="header-left">
  <view class="header-left-top">{{selectedDay.year}}/{{selectedDay.month}}/{{selectedDay.day}}</view>
 </view>
 <view class="header-right">
  <button bindtap="returnToday" color="#4e8a8d" class=".button" round type="info">回到今天</button>
 </view>
</view>

<!-- 顶部日历部分 -->
<view class="page-section-spacing">
 <!-- scroll-into-view 不能以数字开头 -->
 <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" scroll-into-view="{{intoView}}"
  style="width: 100%">

  <!-- 这里用到了自定义属性，需要以 data 开头，以-连接，否则在event中获取不到 -->
  <view wx:for="{{dayList}}" wx:for-item="item" wx:for-index="index" wx:key="index" id="view{{index}}"
   class="scroll-view-item_H {{currentIndex==index 'active':'noactive'}}" data-index="{{index}}"
   bindtap="clickDate">
   <view class="scroll-week">周{{item.week}}</view>
   <view class="scroll-day">{{item.day}}</view>
  </view>
 </scroll-view>
</view>

2.js:

Page({

 data: {
  //日期数组，每个元素都是一个对象，共有21个元素 {day: 10, month: 11, week: "二", year: 2020}
  dayList: [],
  // 一天的毫秒数
  millisecond: 86400000,
  // 生命周期函数中设置为 view7，用来控制 scroll-view 的滑动，滑动到指定项（该项的id和intoView的值相同）
  intoView: '',
  // 当前项的下标，初始值是7。从0开始，“今天”之前有7天，所以“今天”的下标是7
  currentIndex: 7,
  // 选中的日期(用户通过点击上面的按钮)
  selectedDay: {},
  // 滑动动画时长
  duration: 500,
  // swiper里面的数据,是一个对象数组。每一个元素都代表一条记录。
  /*
   所有的代办事项，是一个数组，每一个元素依旧是一个数组。任何里面的每一个元素就是一个对象，代表一条代办记录
   {gmtCreate: 1605023745000, gmtModify: 1605023750000, id: 1, importance: 1, isFinished: 0,remark: "测试备注",timeFlag: 1 title: "微信小程序" uId: 1}
  */
  targetList: [],
  // swiper的高度
  widHeight: 350,
  // 用户id，页面加载时从全局 globalData 中获取
  uid: "1",
  // // 完成按钮图标对应的 url： ../../icon/target.png  或者 ../../icon/target_ok.png
  // imageUrl: "",
  // iconClass: ""
 },

 clickTargetItem: function (e) {
  console.log("clickItem");
  console.log(e.currentTarget.dataset);
  this.setData({
   "message": e.currentTarget.dataset
  })
  console.log("本条记录的id为：", e.currentTarget.dataset.id);
  console.log(this.data.targetList[this.data.currentIndex]);
 },
 // 中部 swiper 滑动触发的点击事件
 siwperChange: function (e) {


  // console.log(e.detail);
  // 1. 设置 data 中的 index 的值，然后上面的日历部分的index也会改变。这样上面日历部分和下面的swipper部分就可以同步
  this.setData({
   "currentIndex": e.detail.current
  })
  // 2. 重新设置 siwper 的高度（先更改 currentIndex，然后在设置对应 siwper 的高度）
  // console.log("slide");
  // console.log(this.data.targetList);
  // console.log("currentIndex", this.data.currentIndex);
  // console.log(this.data.targetList[this.data.currentIndex].length);
  // console.log("myheight", myHeight);

  var myHeight = this.data.targetList[this.data.currentIndex].length * 135 + 3 * 70 + 176 + 100;


  wx.getSystemInfo({
   success: (result) => {
    console.log("页面高度", result.screenHeight);
    if (myHeight < result.screenHeight) {
     myHeight = result.screenHeight;
    }
   },
  });

  // 设置页面高度和当前选择的日期
  this.setData({
   'widHeight': myHeight,
   "selectedDay": this.data.dayList[e.detail.current]
  })

 },

 // 点击日历上面的日期
 clickDate: function (event) {
  console.log(event.currentTarget.dataset);
  // 设置数组下标
  this.setData({
   'intoView': "view" + event.currentTarget.dataset.index,
   'currentIndex': event.currentTarget.dataset.index
  })

  // 更改用户选中的日期，然后在页面中渲染选中的日期
  this.setData({
   "selectedDay": this.data.dayList[event.currentTarget.dataset.index]
  })
  this.onPullDownRefresh()
 },

 // “回到今天” 按钮对应的点击事件
 returnToday: function () {
  console.log("回到今天");
  this.setData({
   "intoView": "view7",
   "currentIndex": 7,
   "selectedDay": this.data.dayList[7]
  })
  this.onPullDownRefresh()
 },

 // 封装的 js 函数，生成一个 dayList，里面有最近3个礼拜的日期信息
 weekDate: function () {

  var dayList = [];

  // 获取当前时间对应的 date 对象
  var myDate = new Date();

  // 因为要最近3个礼拜的日期信息，可能涉及到月份的变化所以不能简单的对天数加1或者减1，可以先计算出毫秒数，然后转换为日期
  var millisecond = myDate.getTime();

  // 为 "上一个礼拜的时间" 加入 dayList 中
  for (var i = 7; i > 0; i--) {
   // 根据毫秒数构造一个 Date 对象
   var tempDate = new Date(millisecond - i * this.data.millisecond);

   dayList.push({
    'day': tempDate.getDate(),
    'month': tempDate.getMonth() + 1,
    'week': this.toWeekDay(tempDate.getDay()),
    'year': tempDate.getFullYear()
   });
  }

  // 将 “今天” 加入 dayList 中
  dayList.push({
   'day': myDate.getDate(),
   'month': myDate.getMonth() + 1,
   'week': this.toWeekDay(myDate.getDay()),
   'year': myDate.getFullYear()
  })


  // 将 “未来2周” 加入 dayList 中
  for (var i = 1; i <= 13; i++) {
   var tempDate = new Date(millisecond + i * this.data.millisecond);
   dayList.push({
    'day': tempDate.getDate(),
    'month': tempDate.getMonth() + 1,
    'week': this.toWeekDay(tempDate.getDay()),
    'year': tempDate.getFullYear()
   })
  }

  return dayList;
 },

 // 传入数据 讲一周的某一天返回成中文状态下的字符
 toWeekDay: function (weekDay) {
  switch (weekDay) {
   case 1:
    return '一';
    break;
   case 2:
    return '二';
    break;
   case 3:
    return '三';
    break;
   case 4:
    return '四';
    break;
   case 5:
    return '五';
    break;
   case 6:
    return '六';
    break;
   case 0:
    return '日';
    break;
   default:
    break;
  }
  return '传入未知参数';
 },

 
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {

  // 加载数据，调用封装的方法
  this.loadingData();

 },

 // 生命周期函数：用户下拉刷新
 onPullDownRefresh: function () {
  console.log("refresh");

  // 加载数据，调用封装的方法
  this.loadingData();
 },

 // 封装出来的加载数据的函数
 loadingData: function () {
  wx.showLoading({
   title: '加载中',
  })
 
  // 1. 获取最近3周的日期信息，存入 this.data 中
  var dayList = this.weekDate();
  // 通过 scroll-into-view 设置一开始的位置
  this.setData({
   "dayList": dayList,
   "intoView": "view7"
  });

  // 1.1 设置当前选中的日期
  this.setData({
   "selectedDay": this.data.dayList[7]
  })


  // 2. 从 globalData 中获取用户openid
  var app = getApp();
  this.setData({
   "uid": wx.getStorageSync('openid')
  })

  // 2. 获取代办事项信息，根据用户id获取
  // 向后端服务器发送请求
  // 将当前的日期发送给后端服务器
  var myDate = new Date();
  var millisecond = myDate.getTime();
  var that=this;
  wx.request({
   url: app.globalData.url + 'api/wx/getTargetByUserId',
   method: "GET",
   data: {
    "uid": this.data.uid,
    "millisecond": millisecond,
    "currentIndex": this.data.currentIndex
   },
   success: res => {
    console.log("请求成功！")
    console.log(res.data.length);

    // 设置待办事项，同时设置 swiper 的高度
    // “今天” 对应的 swiper-item 下标是7，所以选择数组第7个元素

    var myHeight = res.data.length * 70 +250;
    console.log(myHeight);
    //console.log("今天的代办事项有:", res.data[7].length)
    //console.log("myheight", myHeight);

    // 为了让 swiper 能够覆盖整个页面（只有这样，按住其他地方进行滑动时，也可以成功的滑动 siwpper）
    /*
     判断 myHeight 的高度
     为了让 swiper 能够覆盖整个页面（只有这样，按住其他地方进行滑动时，也可以成功的滑动 siwpper）
    */

    wx.getSystemInfo({
     success: (result) => {
      console.log("页面高度", result.screenHeight);
      if (myHeight < result.screenHeight-250) {
       myHeight = result.screenHeight-250;
      }
     },
    })

    this.setData({
     'targetList': res.data,
     'winHeight': myHeight,

    })

    // 隐藏提示框
    wx.hideLoading();

    // 停止下拉刷新
    wx.stopPullDownRefresh()
   }
  })
 },

})

3.wxss:

/* 顶部时间展示区域 */
.header {
 width: 100%;
 height: 125rpx;
 /* background-color: palegreen; */
}

.header-left {
 float: left;
}

.header-left-top {
 height: 62.5rpx;
 line-height: 62.5rpx;
 margin-left: 25rpx;
 font-size: 40rpx;
 font-weight: 500;
 margin-top: 25rpx;
}

.header-left-bottom {
 height: 62.5rpx;
 margin-left: 25rpx;
}

.header-right {
 float: right;
 margin-right: 30rpx;
 margin-top: 25rpx;
}


/* 顶部日历部分  */
.scroll-view_H {
 white-space: nowrap;
}

.scroll-view-item_H {
 display: inline-block;
 width: 14.4%;
 height: 140rpx;
 /* background-color: pink; */
 /* border: 2px solid; */
 border-bottom: 1px solid #cccccc;

 /* opacity: 0.5; */
 color: #96989D;
 font-size: 32rpx;
 font-family: CenturyGothic-Bold;
 font-weight: bold;

 padding-bottom: 30rpx;
}

.scroll-week {
 text-align: center;
 height: 70rpx;
 line-height: 70rpx;
}

.scroll-day {
 text-align: center;
 height: 70rpx;
 line-height: 70rpx;
}

.active .scroll-day {
 border-radius: 90rpx;
 background-color: #4e8a8d;
 color: white;
}

/* 中部的 swiper-item */
swiper {
 height: 100%;
}

.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。