摘要:最近做小程序開(kāi)發(fā),出于練手,也是工作需要,就做了個(gè)微信小程序的類似于酒店預(yù)訂的日歷插件。計(jì)算每月第一天是星期幾日一二三四五六利用構(gòu)造函數(shù)生成數(shù)據(jù),一會(huì)用。
最近做小程序開(kāi)發(fā),出于練手,也是工作需要,就做了個(gè)微信小程序的類似于酒店預(yù)訂的日歷插件。
先上圖;
這個(gè)插件分為上下兩部分,上邊是tab欄,會(huì)根據(jù)當(dāng)前的日期自動(dòng)定位到當(dāng)前,并展示以后7天的日期,下邊為內(nèi)容展示,隨tab欄變化而變化。
思路:
首先用new Data()時(shí)間對(duì)象初始化時(shí)間,獲取當(dāng)前的日期,用new Date(Date.UTC(year, month - 1, 1)).getDay()獲取每個(gè)月的第一天是星期幾。
// 計(jì)算每月第一天是星期幾 function getFirstDayOfWeek(year, month) { return new Date(Date.UTC(year, month - 1, 1)).getDay(); } const date = new Date(); const cur_year = date.getFullYear(); const cur_month = date.getMonth() + 1; const cur_date=date.getDate(); const weeks_ch = ["日", "一", "二", "三", "四", "五", "六"];
利用構(gòu)造函數(shù)生成數(shù)據(jù),一會(huì)用。
//利用構(gòu)造函數(shù)創(chuàng)建對(duì)象 function calendar(date,week){ this.date=cur_year+"-"+cur_month+"-"+date; if(date==cur_date){ this.week = "今天"; }else if(date==cur_date+1){ this.week = "明天"; }else{ this.week = "星期" + week; } }
使用for循環(huán)生成json數(shù)據(jù):
for(var i=1;i<=monthLength;i++){ //當(dāng)循環(huán)完一周后,初始化再次循環(huán) if(x>6){ x=0; } //利用構(gòu)造函數(shù)創(chuàng)建對(duì)象 that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0]) x++; }
這里因?yàn)橐恢苡?天,所以當(dāng)x>6的時(shí)候,重置為0。
最后展示部分源碼
var that=this; function getThisMonthDays(year, month) { return new Date(year, month, 0).getDate(); } // 計(jì)算每月第一天是星期幾 function getFirstDayOfWeek(year, month) { return new Date(Date.UTC(year, month - 1, 1)).getDay(); } const date = new Date(); const cur_year = date.getFullYear(); const cur_month = date.getMonth() + 1; const cur_date=date.getDate(); const weeks_ch = ["日", "一", "二", "三", "四", "五", "六"]; //利用構(gòu)造函數(shù)創(chuàng)建對(duì)象 function calendar(date,week){ this.date=cur_year+"-"+cur_month+"-"+date; if(date==cur_date){ this.week = "今天"; }else if(date==cur_date+1){ this.week = "明天"; }else{ this.week = "星期" + week; } } //當(dāng)前月份的天數(shù) var monthLength= getThisMonthDays(cur_year, cur_month) //當(dāng)前月份的第一天是星期幾 var week = getFirstDayOfWeek(cur_year, cur_month) var x = week; for(var i=1;i<=monthLength;i++){ //當(dāng)循環(huán)完一周后,初始化再次循環(huán) if(x>6){ x=0; } //利用構(gòu)造函數(shù)創(chuàng)建對(duì)象 that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0]) x++; } //限制要渲染的日歷數(shù)據(jù)天數(shù)為7天以內(nèi)(用戶體驗(yàn)) var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length:7) that.setData({ calendar: flag }) //設(shè)置scroll-view的子容器的寬度 that.setData({ width: 186 * parseInt(that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7) })
插件地址:github地址
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/94609.html
摘要:最近在做微信小程序項(xiàng)目,其中涉及到日歷。其次,弄清楚每月一號(hào)對(duì)應(yīng)的是周幾。當(dāng)月天數(shù)已知,上月殘余天數(shù),我們可以用當(dāng)月號(hào)是周幾來(lái)推斷出來(lái),下月殘余天數(shù),正好用當(dāng)月天數(shù)上月殘余。 最近在做微信小程序項(xiàng)目,其中涉及到日歷。一直以來(lái),遇到日歷,就是網(wǎng)上隨便找個(gè)插件,這次心血來(lái)潮,想著自己去實(shí)現(xiàn)一下。這次不是封裝功能強(qiáng)大,健碩完美的組件,只是記錄一下,主體思路。更多功能還得根據(jù)項(xiàng)目需要,自己去挖...
awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開(kāi)源項(xiàng)目庫(kù)集合。我們會(huì)定期同步上的項(xiàng)目到這里,也歡迎各位 UI組件開(kāi)發(fā)框架實(shí)用庫(kù)開(kāi)發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫(kù)wx-charts ★449 - 微信小程...
摘要:一前言最近公司要做一個(gè)酒店入住的小程序,不可避免的一定會(huì)使用到日歷,而小程序沒(méi)有內(nèi)置的日歷組件。二代碼原理分析寫(xiě)一個(gè)日歷只需要知道兩件事情一個(gè)月有多少天每個(gè)月的第一天是星期幾。 一、前言 最近公司要做一個(gè)酒店入住的小程序,不可避免的一定會(huì)使用到日歷,而小程序沒(méi)有內(nèi)置的日歷組件。在網(wǎng)上看了一下也沒(méi)有非常適合需求的日歷,于是自己寫(xiě)了一個(gè)。 二、代碼 1. 原理分析 寫(xiě)一個(gè)日歷只需要知道兩件...
閱讀 3274·2021-11-23 09:51
閱讀 939·2021-09-03 10:30
閱讀 3212·2021-08-31 09:40
閱讀 3278·2019-08-30 14:22
閱讀 902·2019-08-30 14:09
閱讀 2900·2019-08-30 13:21
閱讀 3232·2019-08-28 18:03
閱讀 2859·2019-08-26 13:44