微信小程序招财日历_微信小程序日历效果

更新时间:2024-06-10    来源:微信    手机版     字体:

【www.bbyears.com--微信】

本文实例为大家分享了微信小程序日历效果的具体代码,供大家参考,具体内容如下

源码下载地址

项目需要一个日历功能,花了一天时间实现的微信小程序日历,js大小只有几k,引入了bootstrap字体图标(文件icon.wxss,该字体已经bootstrap字体图标需要的字体)看起来有80k,出去icon.wxss整个只有几k,有问题欢迎指正

如图:

index.wxml 


 
  flex">
   flex-item">
    
     
    
   
   
    {{currentDate}}
   
   
    
     
    
   
  
  
   
    
   
   
    
   
   
    
   
   
    
   
   
    
   
   
    
   
   
    
   
  
  
   
     {{vo}}
     {{vo}}
   
  
 

index.wxss

@import "../../dist/css/icon.wxss";
page {
 background-color: #2a8cef;
 background:-webkit-gradient(linear, 0 0, 0 bottom, from(#2a8cef), to(#8A2BE2));
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
 flex-wrap: nowrap;
 justify-content: flex-start;
 align-items: stretch;
 font-size: 14px;
}
 
.box {
 display: block;
 margin: 10px;
}
 
.box-flex {
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap;
}
 
.flex-item {
 flex-flow: nowrap;
 flex-grow: 1;
 flex-shrink: 1;
 width: 14.2%;
}
 
.item-content {
 margin: 5px;
 padding: 0 10px;
 text-align: center;
 background-color: #000;
 height: 2rem;
 line-height: 2rem;
 color: #fff;
}
 
.bk-color-day {
 background-color: #8A2BE2;
}
 
.item-content-current-day {
 flex-grow: 2;
}

index.js 

var app = getApp();
Page({
  data: {
    currentDate: "2017年05月03日",
    dayList: "",
    currentDayList: "",
    currentObj: "",
    currentDay: ""
  },
  onLoad: function (options) {
    var currentObj = this.getCurrentDayString()
    this.setData({
      currentDate: currentObj.getFullYear() + "年" + (currentObj.getMonth() + 1) + "月" + currentObj.getDate() + "日",
      currentDay: currentObj.getDate(),
      currentObj: currentObj
    })
    this.setSchedule(currentObj)
  },
  doDay: function (e) {
    var that = this
    var currentObj = that.data.currentObj
    var Y = currentObj.getFullYear();
    var m = currentObj.getMonth() + 1;
    var d = currentObj.getDate();
    var str = ""
    if (e.currentTarget.dataset.key == "left") {
      m -= 1
      if (m <= 0) {
        str = (Y - 1) + "/" + 12 + "/" + d
      } else {
        str = Y + "/" + m + "/" + d
      }
    } else {
      m += 1
      if (m <= 12) {
        str = Y + "/" + m + "/" + d
      } else {
        str = (Y + 1) + "/" + 1 + "/" + d
      }
    }
    currentObj = new Date(str)
    this.setData({
      currentDate: currentObj.getFullYear() + "年" + (currentObj.getMonth() + 1) + "月" + currentObj.getDate() + "日",
      currentObj: currentObj
    })
    this.setSchedule(currentObj);
  },
  getCurrentDayString: function () {
    var objDate = this.data.currentObj
    if (objDate != "") {
      return objDate
    } else {
      var c_obj = new Date()
      var a = c_obj.getFullYear() + "/" + (c_obj.getMonth() + 1) + "/" + c_obj.getDate()
      return new Date(a)
    }
  },
  setSchedule: function (currentObj) {
    var that = this
    var m = currentObj.getMonth() + 1
    var Y = currentObj.getFullYear()
    var d = currentObj.getDate();
    var dayString = Y + "/" + m + "/" + currentObj.getDate()
    var currentDayNum = new Date(Y, m, 0).getDate()
    var currentDayWeek = currentObj.getUTCDay() + 1
    var result = currentDayWeek - (d % 7 - 1);
    var firstKey = result <= 0 ? 7 + result : result;
    var currentDayList = []
    var f = 0
    for (var i = 0; i < 42; i++) {
      let data =[]
      if (i < firstKey - 1) {
        currentDayList[i] = ""
      } else {
        if (f < currentDayNum) {
          currentDayList[i] = f + 1
          f = currentDayList[i]
        } else if (f >= currentDayNum) {
          currentDayList[i] = ""
        }
      }
    }
    that.setData({
      currentDayList: currentDayList
    })
  }
}) 

本文来源:http://www.bbyears.com/shoujikaifa/159484.html

热门标签

更多>>

本类排行