国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何開(kāi)發(fā)一個(gè)微信小程序日歷插件

DandJ / 2068人閱讀

摘要:最近做小程序開(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

相關(guān)文章

  • 簡(jiǎn)陋至極:信小程序日歷組件(思路)

    摘要:最近在做微信小程序項(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)目需要,自己去挖...

    import. 評(píng)論0 收藏0
  • 信小程序資源匯總

    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 - 微信小程...

    Olivia 評(píng)論0 收藏0
  • 信小程序:手寫(xiě)日歷組件

    摘要:一前言最近公司要做一個(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è)日歷只需要知道兩件...

    genefy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<