微信小程序 --- 日历效果
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
});
}
})
微信小程序 --- 日历效果的更多相关文章
- 微信小程序 - toptip效果
在Page顶部下滑一个提示条 , 代码见 /mixins/UIComponent.js ,其中的self 可以认为是微信小程序的Page对象 效果: 默认2秒展示,上移动画隐藏 /** * 展示顶部 ...
- 微信小程序 折叠效果
<view class='help'> <view class='help_item'> <view class='title' data-index='1' catch ...
- 微信小程序日历面板插件
创建日历面板组件,在components目录下创建calendar文件夹 1.calendar.js // components/calendar/calendar.js var util = req ...
- 微信小程序日历课表
最近项目中使用到了日历,在网上找了一些参考,自己改改,先看效果图 wxml <view class="date"> <image class="dire ...
- 微信小程序日历插件
1/ wxml代码 <view class="timePick"> <picker mode="date" fields="mo ...
- [组件封装]微信小程序-日历
描述 切换月份, 当天文案为今天, 日期背景变色, 日期红点标识, 点击选中日期. 效果 源码 calendar.wxml <view class="component"&g ...
- 微信小程序日历签到
近日做了一个项目需要用到日历插件,在网上找了一部分感觉跟项目不对口,所以就查考了其他的日历插件做了一个. 需求: 如图: 代码如下: index.wxml: <!--pages/pictrues ...
- 微信小程序--图片相关问题合辑
图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- Android更改popupmenu背景并显示图标
似乎popupmenu是无法单独设置style的,好像是由context决定的,前几天需要设置style,找了很久才找一一个办法,似乎是通过 ContextThemeWrapper 包装一个 Cont ...
- HTML <link> 标签 PC移动网站适配
1.在pc版网页上,添加指向对应移动版网址的特殊链接rel="alternate"标记,这有助于百度发现网站的移动版网页所在的位置: <link rel="cano ...
- Dynamics 365 marketing中添加自定义渠道磁贴
Dynamics 365 marketing中默认的渠道只有Marketing Email和Marketing Activity,想要添加其他渠道必须自定义磁贴,自定义磁贴的步骤如下: 1.创建实体 ...
- ts中基本数据类型(上)
/* 定义数组*/ var arr: number[] = [1, 2, 3]; var arr1: Array<number> = [1, 2, 3]; var arr2: [str ...
- Java实现impala操作kudu
推荐阅读: 论主数据的重要性(正确理解元数据.数据元) CDC+ETL实现数据集成方案 Java实现impala操作kudu 实战kudu集成impala 对于impala而言,开发人员是可以通过JD ...
- linux centos7安装mysql8
一.RPM版安装 查看是否有其他版本的数据库,若有,删除干净 非root用户必须要有sudo权限 1.下载mysql相关安装包 https://mirrors.tuna.tsinghua.edu.cn ...
- Pycharm每次新建工程都要重新安装相关库的解决办法
之前自己每次重建工程时,都不厌其烦的重新安装了第三方的库,直接在pycharm的terminal中利用pip安装,或者鼠标放在所需库的红色波浪线上 直接点击Install Package XXX 后面 ...
- [CF1311C] Perform the Combo
Solution 前缀和搞一下即可 #include <bits/stdc++.h> using namespace std; #define int long long const in ...
- MySql优化之存储引擎和sql优化
存储引擎 使用的存储引擎 myisam / innodb/ memory myisam 存储: 如果表对事务要求不高,同时是以查询和添加为主的,我们考虑使用myisam存储引擎. ,比如 bbs 中的 ...
- mysql-主从备份问题小结
一:防火墙 常用命令 firewall-cmd --state 或 systemctl status firewalld # 查看状态 systemctl start firewalld# 启动 sy ...