博客
关于我
微信小程序可以点击左右按钮切换,一次7天
阅读量:611 次
发布时间:2019-03-12

本文共 2476 字,大约阅读时间需要 8 分钟。

以下是优化后的内容:

获取14天亮度状态逻辑实现

html部分

我们的需求就是实现一个类似效果的日历组件,该组件需要能够显示特定范围内的日历信息并支持周切换功能。以下是实现该需求的代码逻辑解析。

图片 arac Bernardo due to privacy concerns has been removed

接下来,我们重点分析html部分实现的具体逻辑。html部分主要包含以下几个关键组件:

  • 弹出层
  • 标题
  • 周日至星期一的标记
  • 日历条纹
  • 整个日历结构
  • 工作日高亮显示
  • 日历组件的核心逻辑包括:

  • 获取14天的亮度状态数据
  • 处理周切换逻辑
  • 渲染自定义的日历样式
  • pre>data: {show: false,active: -1,weekDate: ['日', '一', '二', '三', '四', '五', '六'],dateArr: [],isTodayWeek: false,todayIndex: 0,lastweek: true,nowdate: new Date().getDate(),datetip: false,datelist: [],isdayorder: []}getstatus() {if (!wx.getStorageSync('token')) returnApi.request(oderRoot + '/api/work/schedule/status', {}, 'GET').then(res => {var _time = new Date()var year = _time.getFullYear()var month = _time.getMonth() + 1res.forEach((item, index) => {month = parseInt(month)var day = parseInt(item.date)var lastDay = 0if (index > 0) {lastDay = parseInt(res[index - 1].date)}if (lastDay > day) {if (month == 12) {year += 1month = 1} else {month += 1}}if (day < 10) {day = '0' + '' + day}if (month < 10) {month = '0' + '' + month}item.day = year + '-' + month + '-' + day})// console.log(res)this.setData({datelist: res})})}

    lastWeek: function () {var _this = thisvar _time = new Date()var lastDay, month, yearif (_this.data.isToday - 7 <= 0) {if (_this.data.month <= 1) {month = 12year = _this.data.year - 1} else {month = _this.data.month - 1year = _this.data.year}lastDay = new Date(year, month, 0).getDate() + (_this.data.isToday - 7)} else {lastDay = _this.data.isToday - 7month = _this.data.monthyear = _this.data.year}_this.setData({isToday: lastDay,month: month,year: year,mountTotalDay: new Date(year, month, 0).getDate(),nextWeek: false,lastweek: true})// _this.dateInit(lastDay, _this.data.isWeek);}

    nextWeek: function () {var _this = thisvar _time = new Date()var nextDay, month, yearif (_this.data.isToday + 7 > _this.data.mountTotalDay) {nextDay = _this.data.isToday + 7 - _this.data.mountTotalDayif (_this.data.month > 11) {month = 1year = _this.data.year + 1} else {month = _this.data.month + 1year = _this.data.year}} else {nextDay = _this.data.isToday + 7month = _this.data.monthyear = _this.data.year}_this.setData({isToday: nextDay,month: month,year: year,mountTotalDay: new Date(year, month, 0).getDate(),lastweek: false,nextWeek: true})// console.log(this.data.month,"month")// _this.dateInit(nextDay, _this.data.isWeek);}

    div>

    该代码主要完成了以下功能:1. 获取14天的状态数据2. 处理上下周切换逻辑3. 渲染日历组件4. 支持日期点击事件5. 自定义日期样式

    div>

    该实现通过微信小程序的数据绑定机制将前端与后端数据进行了有效的联结。通过对14天亮度状态数据的处理与展示,达到了用户需求的最佳呈现效果。

    转载地址:http://yjwaz.baihongyu.com/

    你可能感兴趣的文章
    python出现 unknown encoding: idna 的处理方法
    查看>>
    Python出现 RuntimeError: dictionary changed size during iteration 的解决方法
    查看>>
    Python-numpy(2)数组的操作
    查看>>
    Python-Numpy的tile函数用法
    查看>>
    python-open函数
    查看>>
    Python-Pandas-将特定函数应用于给定级别-多索引数据框架
    查看>>
    python-queue队列通信
    查看>>
    python-ros No module named PyKDL
    查看>>
    python-social-auth 是否需要会话
    查看>>
    Python再获年度编程语言,微软或成最大赢家
    查看>>
    python-week5
    查看>>
    Python写表情包搜索工具(非常详细)零基础入门到精通,收藏这一篇就够了
    查看>>
    Python-【1】配置
    查看>>
    Python-从子文件夹执行绝对导入
    查看>>
    Python-刷新页面,直到元素可单击
    查看>>
    PYTHON-唤醒+VOSK+DEEPSEEK+离线合成-实现纯离线大模型问答
    查看>>
    Python-在Dash回调中重用函数
    查看>>
    PYTHON-基本数据类型-元祖类型,字典类型,集合类型
    查看>>
    python-外观模式
    查看>>
    Python-如何使用FastAPI和uvicorn.run而不阻塞线程?
    查看>>