<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 不能以數(shù)字開頭 -->
?? ?<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>

Page({
?
?? ?data: {
?? ??? ?//日期數(shù)組，每個元素都是一個對象，共有21個元素?? ?{day: 10, month: 11, week: "二", year: 2020}
?? ??? ?dayList: [],
?? ??? ?// 一天的毫秒數(shù)
?? ??? ?millisecond: 86400000,
?? ??? ?// 生命周期函數(shù)中設(shè)置為 view7，用來控制 scroll-view 的滑動，滑動到指定項（該項的id和intoView的值相同）
?? ??? ?intoView: '',
?? ??? ?// 當(dāng)前項的下標(biāo)，初始值是7。從0開始，“今天”之前有7天，所以“今天”的下標(biāo)是7
?? ??? ?currentIndex: 7,
?? ??? ?// 選中的日期(用戶通過點擊上面的按鈕)
?? ??? ?selectedDay: {},
?? ??? ?// 滑動動畫時長
?? ??? ?duration: 500,
?? ??? ?// swiper里面的數(shù)據(jù),是一個對象數(shù)組。每一個元素都代表一條記錄。?
?? ??? ?/*
?? ??? ??? ?所有的代辦事項，是一個數(shù)組，每一個元素依舊是一個數(shù)組。任何里面的每一個元素就是一個對象，代表一條代辦記錄
?? ??? ??? ?{gmtCreate: 1605023745000, gmtModify: 1605023750000, id: 1, importance: 1, isFinished: 0,remark: "測試備注",timeFlag: 1 title: "微信小程序" uId: 1}
?? ??? ?*/
?? ??? ?targetList: [],
?? ??? ?// swiper的高度
?? ??? ?widHeight: 350,
?? ??? ?// 用戶id，頁面加載時從全局 globalData 中獲取
?? ??? ?uid: "1",
?? ??? ?// // 完成按鈕圖標(biāo)對應(yīng)的 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 滑動觸發(fā)的點擊事件
?? ?siwperChange: function (e) {
?
?
?? ??? ?// console.log(e.detail);
?? ??? ?// 1. 設(shè)置 data 中的 index 的值，然后上面的日歷部分的index也會改變。這樣上面日歷部分和下面的swipper部分就可以同步
?? ??? ?this.setData({
?? ??? ??? ?"currentIndex": e.detail.current
?? ??? ?})
?? ??? ?// 2. 重新設(shè)置 siwper 的高度（先更改 currentIndex，然后在設(shè)置對應(yīng) 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;
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ?});
?
?? ??? ?// 設(shè)置頁面高度和當(dāng)前選擇的日期
?? ??? ?this.setData({
?? ??? ??? ?'widHeight': myHeight,
?? ??? ??? ?"selectedDay": this.data.dayList[e.detail.current]
?? ??? ?})
?
?? ?},
?
?? ?// 點擊日歷上面的日期
?? ?clickDate: function (event) {
?? ??? ?console.log(event.currentTarget.dataset);
?? ??? ?// 設(shè)置數(shù)組下標(biāo)
?? ??? ?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()
?? ?},
?
?? ?// “回到今天” 按鈕對應(yīng)的點擊事件
?? ?returnToday: function () {
?? ??? ?console.log("回到今天");
?? ??? ?this.setData({
?? ??? ??? ?"intoView": "view7",
?? ??? ??? ?"currentIndex": 7,
?? ??? ??? ?"selectedDay": this.data.dayList[7]
?? ??? ?})
?? ??? ?this.onPullDownRefresh()
?? ?},
?
?? ?// 封裝的 js 函數(shù)，生成一個 dayList，里面有最近3個禮拜的日期信息
?? ?weekDate: function () {
?
?? ??? ?var dayList = [];
?
?? ??? ?// 獲取當(dāng)前時間對應(yīng)的 date 對象
?? ??? ?var myDate = new Date();
?
?? ??? ?// 因為要最近3個禮拜的日期信息，可能涉及到月份的變化所以不能簡單的對天數(shù)加1或者減1，可以先計算出毫秒數(shù)，然后轉(zhuǎn)換為日期
?? ??? ?var millisecond = myDate.getTime();
?
?? ??? ?// 為 "上一個禮拜的時間" 加入 dayList 中
?? ??? ?for (var i = 7; i > 0; i--) {
?? ??? ??? ?// 根據(jù)毫秒數(shù)構(gòu)造一個 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;
?? ?},
?
?? ?// 傳入數(shù)據(jù) ?講一周的某一天返回成中文狀態(tài)下的字符
?? ?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 '傳入未知參數(shù)';
?? ?},
?
?? ?
?? ?/**
?? ? * 生命周期函數(shù)--監(jiān)聽頁面加載
?? ? */
?? ?onLoad: function (options) {
?
?? ??? ?// 加載數(shù)據(jù)，調(diào)用封裝的方法
?? ??? ?this.loadingData();
?
?? ?},
?
?? ?// 生命周期函數(shù)：用戶下拉刷新
?? ?onPullDownRefresh: function () {
?? ??? ?console.log("refresh");
?
?? ??? ?// 加載數(shù)據(jù)，調(diào)用封裝的方法
?? ??? ?this.loadingData();
?? ?},
?
?? ?// 封裝出來的加載數(shù)據(jù)的函數(shù)
?? ?loadingData: function () {
?? ??? ?wx.showLoading({
?? ??? ??? ?title: '加載中',
?? ??? ?})
? ??
?? ??? ?// 1. 獲取最近3周的日期信息，存入 this.data 中
?? ??? ?var dayList = this.weekDate();
?? ??? ?// 通過 scroll-into-view 設(shè)置一開始的位置
?? ??? ?this.setData({
?? ??? ??? ?"dayList": dayList,
?? ??? ??? ?"intoView": "view7"
?? ??? ?});
?
?? ??? ?// 1.1 設(shè)置當(dāng)前選中的日期
?? ??? ?this.setData({
?? ??? ??? ?"selectedDay": this.data.dayList[7]
?? ??? ?})
?
?
?? ??? ?// 2. 從 globalData 中獲取用戶openid
?? ??? ?var app = getApp();
?? ??? ?this.setData({
?? ??? ??? ?"uid": wx.getStorageSync('openid')
?? ??? ?})
?
?? ??? ?// 2. 獲取代辦事項信息，根據(jù)用戶id獲取
?? ??? ?// 向后端服務(wù)器發(fā)送請求
?? ??? ?// 將當(dāng)前的日期發(fā)送給后端服務(wù)器
?? ??? ?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);
?
?? ??? ??? ??? ?// 設(shè)置待辦事項，同時設(shè)置 swiper 的高度
?? ??? ??? ??? ?// “今天” 對應(yīng)的 swiper-item 下標(biāo)是7，所以選擇數(shù)組第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()
?? ??? ??? ?}
?? ??? ?})
?? ?},
?
})

/* 頂部時間展示區(qū)域 */
.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; } ?