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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

js部分:

// page/index/index.js
Page({ /**
* 页面的初始数据
*/
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
});
}
})

微信小程序 --- 日历效果的更多相关文章

  1. 微信小程序 - toptip效果

    在Page顶部下滑一个提示条 , 代码见 /mixins/UIComponent.js ,其中的self 可以认为是微信小程序的Page对象 效果: 默认2秒展示,上移动画隐藏 /** * 展示顶部 ...

  2. 微信小程序 折叠效果

    <view class='help'> <view class='help_item'> <view class='title' data-index='1' catch ...

  3. 微信小程序日历面板插件

    创建日历面板组件,在components目录下创建calendar文件夹 1.calendar.js // components/calendar/calendar.js var util = req ...

  4. 微信小程序日历课表

    最近项目中使用到了日历,在网上找了一些参考,自己改改,先看效果图 wxml <view class="date"> <image class="dire ...

  5. 微信小程序日历插件

    1/   wxml代码 <view class="timePick"> <picker mode="date" fields="mo ...

  6. [组件封装]微信小程序-日历

    描述 切换月份, 当天文案为今天, 日期背景变色, 日期红点标识, 点击选中日期. 效果 源码 calendar.wxml <view class="component"&g ...

  7. 微信小程序日历签到

    近日做了一个项目需要用到日历插件,在网上找了一部分感觉跟项目不对口,所以就查考了其他的日历插件做了一个. 需求: 如图: 代码如下: index.wxml: <!--pages/pictrues ...

  8. 微信小程序--图片相关问题合辑

    图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...

  9. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

随机推荐

  1. Spring-cloud微服务实战【九】:分布式配置中心config

      回忆一下,在前面的文章中,我们使用了spring cloud eureka/ribbon/feign/hystrix/zuul搭建了一个完整的微服务系统,不管是队内还是对外都已经比较完善了,那我们 ...

  2. AVR单片机教程——示波器

    本文隶属于AVR单片机教程系列.   在用DAC做了一个稍大的项目之后,我们来拿ADC开开刀.在本讲中,我们将了解0.96寸OLED屏,移植著名的U8g2库到我们的开发板上,学习在屏幕上画直线的算法, ...

  3. tensorflow打印可用设备列表

    from tensorflow.python.client import device_libprint(device_lib.list_local_devices())

  4. Vue中的$Bus使用

    Vue中的$Bus使用 将Bus单独抽离成一个文件 Bus.js import Vue from 'vue'; let Bus = new Vue(); export default Bus; 创建两 ...

  5. jmeter脚本调试过程

    1.添加监听器:查看结果树,再回放脚本 2.权限验证,例如:cookies a.谷歌浏览器F12获取session

  6. 使用elementui树形控件写项目小结

    使用tree pagination serch table 实现功能 项目难点主要解析后台传递的代码,线性转树形,这儿加上一个大神的解析 https://blog.csdn.net/dandanzmc ...

  7. linux命令——find

    简介:find是Linux系统中的常用命令(应用程序)之一.它是用来在指定目录层次结构(指定目录的子目录以及子目录的子目录)中查找符合指定条件的文件和目录 一:语法结构 find [directory ...

  8. 阿里云K8S下玩.NET CORE 3.1

    1. 创建阿里云K8S集群,本文以标准托管集群为例 1.1 创建一个 2台 centos 2core 4G的 k8s 集群 1.2 创建成功的模样 2. 创建 asp.net core webapi项 ...

  9. Luogu1738 | 洛谷的文件夹 (Trie+STL)

    题目描述 kkksc03是个非凡的空想家!在短时间内他设想了大量网页,然后总是交给可怜的lzn去实现. 洛谷的网页端,有很多文件夹,文件夹还套着文件夹. 例如:\(/luogu/application ...

  10. .7、void*

    void * 是一种特殊的指针类型,可用于存放任意类型的地址.与其他指针类似,不同的是,我们对该地址中到底是一个什么类型的对象不了解,因此我们不能直接操作void * 所指的对象. ; int *p ...