微信小程序实现时间轴
更新时间：2022年05月22日 11:35:00 作者：我啊困的唉
这篇文章主要为大家详细介绍了微信小程序实现时间轴，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现时间轴的具体代码，供大家参考，具体内容如下
一、显示样式
二、代码
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; } 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
事件对于控件来说至关重要，控件的消息通信机制使用事件的成本最低，但是对于JS控件来说有一些麻烦需要解决，JS类本身不支持事件，DOM模型支持的事件仅适应于浏览器的DOM节点。所以创建一套事件是我们写控件之前要做的2012-10-10
这篇文章主要为大家详细介绍了JavaScript实现大文件上传功能的示例代码，文中的代码讲解详细，对我们学习JavaScript有一定帮助，感兴趣可以跟随小编一起学习一下2022-11-11
本文介绍了JS中空值合并操作符??的用法,包括如何使用它来判断数据是否为“合法数据”,即非空字符串、非undefined和非null,下面就一起来了解一下,感兴趣的可以了解一下2024-09-09
微信小程序数据统计,现在有很多的统计方法和统计工具,下面这篇文章主要给大家介绍了关于小程序统计来源信息的方案与具体代码,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
我们看到很多网站会有有错误404页面，当页面不存存时就会提示，然后过几秒就会自动跳到首页了，下面我来给大家举一个404错误页面跳到首页实例，各位可参考，有需要的朋友可以参考一下2013-08-08
这篇文章主要介绍了基于javascript实现泡泡大冒险网页版小游戏，很有趣的游戏，可以练习打字速度，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章介绍了JS实现简单的Canvas画图实例代码，有需要的朋友可以参考一下2013-07-07
这篇文章主要为大家详细介绍了原生js实现放大镜效果，制作一个类似于淘宝的放大镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
最近在百度搜索的时候，当你输入一个字或者词的时候，他会给你们弹出一个下拉框出来，里面是和你相关的搜索提示，效果非常人性化，基于js怎么实现搜索关键词智能提示功能，下面小编通过实例代码给大家介绍下，需要的的朋友参考下吧2017-07-07
这篇文章主要介绍了JavaScript实现excel文件导入导出,文件的导入导出是非常常见的需求功能，excel文件的导入导出更为常见，实践中许多时候，是调用接口实现导入导出的,具体实现内容需要的小伙伴可以参考一下2022-06-06
最新评论