博客
关于我
微信小程序可以点击左右按钮切换,一次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中enumerate、变量类型转换
    查看>>
    python中execute是啥_python – 为什么“c.execute(…)”打破循环?
    查看>>
    python中exit和break区别_Python中exit()和sys.exit()之间的区别
    查看>>
    python中h5的用法
    查看>>
    python中http协议编程_HTTP编程
    查看>>
    python中import os_Python:相对导入与绝对导入(import)、os.path、__file__
    查看>>
    python中is和==操作符
    查看>>
    Python中range对象的使用以及打印九九乘法表
    查看>>
    Python中set.discard和set.remove方法之间的运行时差异?
    查看>>
    python中tkinter中value_输入字段中的python Tkinter get()值
    查看>>
    Python中wx.FlexGridSizer
    查看>>
    Python中xPath技术和BeautifulSoup的使用
    查看>>
    python中yield的用法详解——最简单,最清晰的解释
    查看>>
    python中‘set.intersection()‘的算法是什么?
    查看>>
    Python中一个图形中的多个绘图
    查看>>
    python中一个好的持久同步队列
    查看>>
    Python中不准确的对数
    查看>>
    python中什么是实例方法_在Python中创建实例方法对象的不同方法
    查看>>
    Python中使用cutecharts实现简单的手绘风格的图表
    查看>>
    python中使用dxfgrabber,解析dxf文件信息生成obj文件
    查看>>