<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>

.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;}

// page/index/index.jsPage({ /**  * 頁面的初始數據  */ data: {  arr: [],  sysW: null,  lastDay: null,  firstDay: null,  weekArr: ['日', '一', '二', '三', '四', '五','六'],  year: null }, //獲取日歷相關參數 dataTime: function () {  var date = new Date();  var year = date.getFullYear();  var month = date.getMonth() ;  var months = date.getMonth() + 1;  //獲取現今年份  this.data.year = year;  //獲取現今月份  this.data.month = months;  //獲取今日日期  this.data.getDate = date.getDate();  //最后一天是幾號  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();  //根據得到今月的最后一天日期遍歷 得到所有日期  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,//更具屏幕寬度變化自動設置寬度   marLet: this.data.firstDay,   arr: this.data.arr,   year: this.data.year,   getDate: this.data.getDate,   month: this.data.month  }); }})