微信小程序实现时间轴
更新时间: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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
JavaScript+html5 canvas制作的圆中圆效果实例
这篇文章主要介绍了JavaScript+html5 canvas制作的圆中圆效果,结合完整实例形式分析了基于JavaScript与html5 canvas技术实现的图形绘制与颜色随机填充技巧,需要的朋友可以参考下2016-01-01js使用Array.prototype.sort()对数组对象排序的方法
这篇文章主要介绍了js使用Array.prototype.sort()对数组对象排序的方法,实例分析了Array.prototype.sort()的原理与相关的使用技巧,需要的朋友可以参考下2015-01-01js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
本文是对js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助2013-11-11
最新评论