微信小程序日历记事本前端

  • T5_133309
    了解作者
  • 7.1KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-05 01:41
    上传日期
这个是一个日历记事本的微信小程序的前端模板,我是把他直接提交到Java中去使用的,使用的Java新建了一个项目实现后台的操作的,实现对于数据的增删改查的
微信小程序.rar
  • 微信小程序
  • app.json
    300B
  • Components
  • calendar
  • calendar.wxml
    2KB
  • calendar.wxss
    2.5KB
  • calendar.json
    51B
  • calendar.js
    5.9KB
  • pages
  • index
  • index.js
    1.5KB
  • index.json
    87B
  • index.wxss
    0B
  • index.wxml
    995B
  • second
  • second.wxml
    21B
  • second.wxss
    0B
  • second.js
    993B
  • second.json
    51B
  • sitemap.json
    191B
  • app.wxss
    51B
  • app.js
    7B
  • project.config.json
    923B
内容介绍
Component({ //初始默认为当前日期 properties: { defaultValue: { type: String, value: '' }, //星期数组 weekText: { type: Array, value: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] }, lastMonth: { type: String, value: '◀' }, nextMonth: { type: String, value: '▶' } }, // 组件的初始数据 data: { //当月格子 thisMonthDays: [], //上月格子 empytGridsBefore: [], //下月格子 empytGridsAfter: [], //显示日期 title: '', //格式化日期 format: '', year: 0, month: 0, date: 0, toggleType: 'large', scrollLeft: 0, //常量 用于匹配是否为当天 YEAR: 0, MONTH: 0, DATE: 0 }, ready: function () { this.today(); }, methods: { //切换展示 toggleType() { console.log(this.data.toggleType) this.setData({ toggleType: this.data.toggleType == 'mini' ? 'large' : 'mini' }) //初始化日历组件UI this.display(this.data.year, this.data.month, this.data.date); }, //滚动模式 //当年当月当天 滚动到制定日期 否则滚动到当月1日 scrollCalendar(year, month, date) { console.log(year, month, date) var that = this, scrollLeft = 0; wx.getSystemInfo({ success(res) { //切换月份时 date为0 if (date == 0) { scrollLeft = 0; //切换到当年当月 滚动到当日 if (year == that.data.YEAR && month == that.data.MONTH) { scrollLeft = that.data.DATE * 45 - res.windowWidth / 2 - 22.5; } } else { // 点选具体某一天 滚到到指定日期 scrollLeft = date * 45 - res.windowWidth / 2 - 22.5; } that.setData({ scrollLeft: scrollLeft }) } }) }, //初始化 display: function (year, month, date) { this.setData({ year, month, date, title: year + '年' + this.zero(month) + '月' }) this.createDays(year, month); this.createEmptyGrids(year, month); //滚动模糊 初始界面 this.scrollCalendar(year, month, date); }, //默认选中当天 并初始化组件 today: function () { let DATE = this.data.defaultValue ? new Date(this.data.defaultValue) : new Date(), year = DATE.getFullYear(), month = DATE.getMonth() + 1, date = DATE.getDate(), select = year + '-' + this.zero(month) + '-' + this.zero(date); this.setData({ format: select, select: select, year: year, month: month, date: date, YEAR: year, MONTH: month, DATE: date, }) //初始化日历组件UI this.display(year, month, date); //发送事件监听 this.triggerEvent('select', select); }, //选择 并格式化数据 select: function (e) { let date = e.currentTarget.dataset.date, select = this.data.year + '-' + this.zero(this.data.month) + '-' + this.zero(date); this.setData({ title: this.data.year + '年' + this.zero(this.data.month) + '月' + this.zero(date) + '日', select: select, year: this.data.year, month: this.data.month, date: date }); //发送事件监听 this.triggerEvent('select', select); //滚动日历到选中日期 this.scrollCalendar(this.data.year, this.data.month, date); }, //上个月 lastMonth: function () { let month = this.data.month == 1 ? 12 : this.data.month - 1; let year = this.data.month == 1 ? this.data.year - 1 : this.data.year; //初始化日历组件UI this.display(year, month, 0); }, //下个月 nextMonth: function () { let month = this.data.month == 12 ? 1 : this.data.month + 1; let year = this.data.month == 12 ? this.data.year + 1 : this.data.year; //初始化日历组件UI this.display(year, month, 0); }, //获取当月天数 getThisMonthDays: function (year, month) { return new Date(year, month, 0).getDate(); }, // 绘制当月天数占的格子 createDays: function (year, month) { let thisMonthDays = [], days = this.getThisMonthDays(year, month); for (let i = 1; i <= days; i++) { thisMonthDays.push({ date: i, dateFormat: this.zero(i), monthFormat: this.zero(month), week: this.data.weekText[new Date(Date.UTC(year, month - 1, i)).getDay()] }); } this.setData({ thisMonthDays }) }, //获取当月空出的天数 createEmptyGrids: function (year, month) { let week = new Date(Date.UTC(year, month - 1, 1)).getDay(), empytGridsBefore = [], empytGridsAfter = [], emptyDays = (week == 0 ? 7 : week); //当月天数 var thisMonthDays = this.getThisMonthDays(year, month); //上月天数 var preMonthDays = month - 1 < 0 ? this.getThisMonthDays(year - 1, 12) : this.getThisMonthDays(year, month - 1); //空出日期 for (let i = 1; i <= emptyDays; i++) { empytGridsBefore.push(preMonthDays - (emptyDays - i)); } var after = (42 - thisMonthDays - emptyDays) - 7 >= 0 ? (42 - thisMonthDays - emptyDays) - 7 : (42 - thisMonthDays - emptyDays); for (let i = 1; i <= after; i++) { empytGridsAfter.push(i); } this.setData({ empytGridsAfter, empytGridsBefore }) }, //补全0 zero: function (i) { return i >= 10 ? i : '0' + i; }, } })
评论
    相关推荐
    • 微信小程序源码
      微信小程序源码微信小程序源码微信小程序源码微信小程序源码微信小程序源码
    • 微信小程序
      微信小程序微信小程序微信小程序微信小程序微信小程序微信小程序微信小程序
    • 微信小程序
      PartyTogether 微信小程序 This is a small DEMO for Class 10-year anniversary. I will play around with 微信小程序,and at the same time make it work for our class.
    • 微信小程序
      零基础学习微信小程序开发,精选5个案例详细讲解。零基础学习微信小程序开发,精选5个案例详细讲解。
    • 微信小程序
      微信小程序食品商城示例,微信小程序食品商城示例,微信小程序食品商城示例,
    • 微信小程序
      微信小程序天气预报微信小程序天气预报微信小程序天气预报微信小程序天气预报微信小程序天气预报微信小程序天气预报微信小程序天气预报微信小程序天气预报微信小程序天气预报微信小程序天气预报
    • 微信小程序微信小应用微信开发
      微信小程序,微信小应用,微信开发
    • 微信小程序微信小程序游戏纪念碑古游戏源码
      现在微信小程序游戏比较火,跳一跳风靡,这里给大家分享一个小程序游戏:纪念碑谷的源码,希望能帮助到大家
    • 微信小程序
      微信小程序源码仿幸运转盘抽奖微信小程序源码仿幸运转盘抽奖微信小程序源码仿幸运转盘抽奖
    • 微信小程序微信公众号微信支付golang
      微信小程序微信公众号微信支付golang-源码