本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)日歷效果的具體代碼，供大家參考，具體內(nèi)容如下

效果預(yù)覽:

wxml部分:

<view class='box1' style='width: {{ sysW * 7 }}px'> <view class='dateBox'>{{ year }} - {{ month}}</view> <block wx:for='{{ weekArr }}'>  <view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;'>{{ item }}</view> </block> <block wx:for='{{ arr }}'>  <view style='{{ index == 0 ? "margin-left:" + sysW * marLet + "px;" : "" }}width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' class='{{ item == getDate ? "dateOn" : ""}}'>{{ item }}</view> </block></view>

wxss部分：

.box1 .dateBox{ width: 100%; height: 50px; line-height: 50px; text-align: center; margin-top: 20px; font-size: 40rpx;}.box1{ display: flex; flex-wrap: wrap; margin: 0 auto;}.box1>view{ height: 30px; line-height: 30px; text-align: center; font-size: 34rpx;}.dateOn{ border-radius: 50%; background-color: hotpink; color: #fff;}

js部分:

// page/index/index.jsPage({ /**  * 頁(yè)面的初始數(shù)據(jù)  */ data: {  arr: [],  sysW: null,  lastDay: null,  firstDay: null,  weekArr: ['日', '一', '二', '三', '四', '五','六'],  year: null }, //獲取日歷相關(guān)參數(shù) dataTime: function () {  var date = new Date();  var year = date.getFullYear();  var month = date.getMonth() ;  var months = date.getMonth() + 1;  //獲取現(xiàn)今年份  this.data.year = year;  //獲取現(xiàn)今月份  this.data.month = months;  //獲取今日日期  this.data.getDate = date.getDate();  //最后一天是幾號(hào)  var d = new Date(year, months, 0);  this.data.lastDay = d.getDate();  //第一天星期幾  let firstDay = new Date(year, month, 1);  this.data.firstDay = firstDay.getDay(); }, onLoad: function (options) {  this.dataTime();  //根據(jù)得到今月的最后一天日期遍歷 得到所有日期  for (var i = 1; i < this.data.lastDay + 1; i++) {   this.data.arr.push(i);  }  var res = wx.getSystemInfoSync();  this.setData({   sysW: res.windowHeight / 12,//更具屏幕寬度變化自動(dòng)設(shè)置寬度   marLet: this.data.firstDay,   arr: this.data.arr,   year: this.data.year,   getDate: this.data.getDate,   month: this.data.month  }); }})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。