探索、思考、创造、分享

数据驱动、坚持为客户提供有价值的服务和内容

当前位置: 南京小程序开发 > 小程序资讯 > 小程序制作 >
南京小程序开发通过微信小程序实现日历效果
来源:南京小程序开发   发布时间:2019-05-20 点击:
在本文中,给出了一个例子来分享微信小程序的具体代码来实现日历效果。供您参考,详情如下。
 
效果预览:
部分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.js
Page({
 
 /**
  * Initial data of pages
  */
 data: {
  arr: [],
  sysW: null,
  lastDay: null,
  firstDay: null,
  WeekArr: ['Day','One','Two','Three','Four','Five','Six'],
  year: null
 },
 
 // Getting Calendar Related Parameters
 dataTime: function () {
  var date = new Date();
  var year = date.getFullYear();
  var month = date.getMonth() ;
  var months = date.getMonth() + 1;
 
  // Get the current year
  this.data.year = year;
 
  // Get the current month
  this.data.month = months;
 
  // Get today's date
  this.data.getDate = date.getDate();
 
  // What's the last day?
  var d = new Date(year, months, 0);
  this.data.lastDay = d.getDate();
 
  // What day is the first day of the week?
  let firstDay = new Date(year, month, 1);
  this.data.firstDay = firstDay.getDay();
 },
 
 onLoad: function (options) {
  this.dataTime();
 
  // All dates are traversed according to the last day of this month.
  for (var i = 1; i < this.data.lastDay + 1; i++) {
   this.data.arr.push(i);
  }
  var res = wx.getSystemInfoSync();
  this.setData({
   SysW: res. windows Height / 12, /// more screen width changes automatically set width
   marLet: this.data.firstDay,
   arr: this.data.arr,
   year: this.data.year,
   getDate: this.data.getDate,
   month: this.data.month
  });
 }
})
以上是本文的全部内容。我希望它对每个人的学习都有所帮助,我希望你能更多地支持南京小程序开发
  • 上一篇:微信小程序如何使流量变现?
  • 下一篇:南京小程序开发使用微信日历组件的详细说明
  • 最新资讯
    2019-11-22
    南京小程序开发注意事项
    现在小程序的发展越加的成熟,加入到小程序中企业商家也越
    2019-11-22
    南京APP开发耗费时间长
    移动互联网在不断发展,移动App也成为了当下最热门的应用工
    2019-10-21
    餐饮微信小程序怎么做
    伴随着科学与技术的日新月异,我们的生活也正在发生着翻天
    2019-10-09
    南京APP定制开发
    一个移动APP项目研发规模可大可小,但都离不开以下几个成员
    2019-10-09
    南京定制小程序需要多少钱
    常常会有顾客向人们资询开发设计1个南京小程序必须要多少
    随机资讯
    2019-09-13
    南京小程序开发哪家好
    南京小程序开发 哪家好?南京小程序开发哪个好?下面跟随
    2018-09-20
    南京网站制作说说为什么在元标题和H1标签上使用
    互联网上的一些“SEO指令”将元标题(标题标签)和H1(标题
    2018-10-10
    百度说熊掌账号标志着白帽SEO的春天,但......
    虽然百度继续声称其在中国的移动搜索结果越来越多来自熊掌
    2019-06-28
    南京小程序开发需要多少费用
    小程序可通过微信(扫描二维码、搜索、分享等多方接口)即可
    2018-09-20
    OS X MAVERICKS:设计师的有用新功能
    苹果公司发布了他们最新的OS X迭代版本,称为Mavericks(最终