碼迷,mamicode.com
首頁 > 微信 > 詳細

微信小程序——極點日歷使用方法

時間:2018-08-30 19:53:27      閱讀:2680      評論:0      收藏:0      [點我收藏+]

標簽:add   設置   eve   https   自己   let   點擊   data   blank   

極點日歷github項目地址

添加至自己的小程序方法

極點日歷屬性接口文檔

代碼實例:

xml:

<calendar  calendar-style="calendar"  header-style="calendar-header"  board-style="calendar-board"
 days-color="{{dayStyle}}" weeks-type="cn" binddayClick="dayClick" />

 

wxss:

/* 日歷 */
.calendar {
    background-color:white;  
    padding-top: 10px; 
}
.calendar-header{
  font-size: large;
  color: #59518d;
}
.calendar-board{
  color: #c7cbe2;
   font-weight: bold;
}

 

js:

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    dayStyle: [
      { month: ‘current‘, day: new Date().getDate(), color: ‘white‘, background: ‘#AAD4F5‘ }, 
      { month: ‘current‘, day: new Date().getDate(), color: ‘white‘, background: ‘#AAD4F5‘ }
    ],
  },
  //給點擊的日期設置一個背景顏色
  dayClick: function (event) {
    let clickDay = event.detail.day;
    let changeDay = `dayStyle[1].day`;
    let changeBg = `dayStyle[1].background`;
    this.setData({
      [changeDay]: clickDay,
      [changeBg]: "#84e7d0"
    })
    
  },
  onLoad:function(){ }
})

 

duang~~顯示結果如下 :

技術分享圖片

 

微信小程序——極點日歷使用方法

標簽:add   設置   eve   https   自己   let   點擊   data   blank   

原文地址:https://www.cnblogs.com/sese/p/9561844.html

(0)
(1)
   
舉報
評論 一句話評論(0
0條  
登錄后才能評論!
? 2014 mamicode.com 版權所有 京ICP備13008772號-2
迷上了代碼!
25选5历史开奖结果百度