微信小程序——获取当天的前一个月至后一个月
看标题也不知道你有没有明白我想表达的意思,先上个动态图吧~
需要分析:
1.获取当前日期的前一个月,后一个月和当月。比如说现在是7月5号,我需要得到6月5号至8月5号的日期,同时还要返回当前的星期。
2.滑动到某个月份的区间的时候,左侧也相应的变到当前月份。比如我现在滑动到6月10号了,那么左侧就要显示成6月了。
3.页面打开默认是显示今天。
实现思路:
1.获取本月的数据(这个例子中就是从7.1至7.31)
2.获取上个月某号至月底的数据(这个例子中就是从6.5至6.30)
3.获取下个月1号至某号的数据(这个例子中就是从8.1至8.5)
4.获取这个月1号,今天,和下一个月1号的scrollLeft的值,这是为了在滑动的时候判断它当前的日期区间是在哪个月份,从而改变左侧的月份值。(这个例子中就是从7.1,7.5,8.1这三个scrollLeft的值)
5.默认显示今天可能通过改变scroll-view的scroll-left的值实现
主要用到的函数:
1.setDate(day):设置一个月的某一天
2.setMonth(month[,day]):设置月份,day是可选参数,可填可不填。填了返回某月的某一天,不填返回某月的第1天。
3.getMonth(),getDate(),getDay():获取月(从0开始),日期,星期(返回0时表示星期日)
具体代码:
JS:
// pages/teacher/interview/index.js
Page({ /**
* 页面的初始数据
*/
data: { },
//获取星期
getWeek(date) {
let weekArray = ['日', '一', '二', '三', '四', '五', '六'];
return weekArray[date.getDay()];
}, //滑动至某个区间时显示当前的月份
dayScroll(e) {
const scrollLeftArray = this.data.scrollLeftArray;
console.log(e.detail.scrollLeft)
let dayScrollLeft = e.detail.scrollLeft; if (dayScrollLeft < scrollLeftArray[0] - 100) {
this.setData({
showCurrentMonth: this.data.month
})
} else if (this.data.day < 7) {
if (e.detail.scrollLeft > scrollLeftArray[2] - (7 - this.data.day)*100) {
this.setData({
showCurrentMonth: this.data.month + 2
})
}
} else if (this.data.day >= 7){
if (e.detail.scrollLeft > scrollLeftArray[2]) {
this.setData({
showCurrentMonth: this.data.month + 2
})
}
} else {
this.setData({
showCurrentMonth: this.data.month + 1
})
}
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
const _this = this;
let now = new Date(),
month = now.getMonth(),
weekday = _this.getWeek(now),
day = now.getDate(),
prevMonth = month==0 ? 11 : month-1,
nextMonth = month==11 ? 0 : month+1,
lastDay = new Date((new Date().setMonth(month + 1, 1) - 1000 * 60 * 60 * 24)).getDate(), //获取当月最后一天日期;
prevLastDay = new Date((new Date().setMonth(month, 1) - 1000 * 60 * 60 * 24)).getDate(); //获取上一个月最后一天日期; let currentMonthDateArray = [], //当前月份的日期和星期的数据集合
prevMonthDateArray = [], //上月日期和星期的数据集合
nextMonthDateArray = []; //下月日期和星期的数据集合
for (let i = 1; i <= lastDay; i++) {
currentMonthDateArray.push({
day: i,
weekDay: _this.getWeek(new Date(new Date().setDate(i)))
})
} for (let i = day; i <= prevLastDay; i++) {
prevMonthDateArray.push({
day: i,
weekDay: _this.getWeek(new Date(new Date().setMonth(month - 1, i)))
})
} for (let i = 1; i <= day; i++) {
nextMonthDateArray.push({
day: i,
weekDay: _this.getWeek(new Date(new Date().setMonth(month + 1, i)))
})
}
_this.setData({
day: day,
month: month,
weekday: weekday,
showCurrentMonth: month + 1,
prevMonthDateArray: prevMonthDateArray,
currentMonthDateArray: currentMonthDateArray,
nextMonthDateArray: nextMonthDateArray
}) //获取左边距是为了滑动时改变月份
const query = wx.createSelectorQuery();
let scrollLeftArray = [];
query.selectAll(`#day${month + 1}1, #day${month + 1}${day}, #day${month + 2}1`).boundingClientRect(function(rects) {
rects.forEach(function(rect) {
scrollLeftArray.push(rect.left)
})
_this.setData({
scrollLeftArray: scrollLeftArray,
scrollLeftInit: scrollLeftArray[1] - 100
})
console.log(scrollLeftArray)
}).exec()
},
})
wxml:
<view class='row day-wrap item-center'>
<view class='month fs-28 fc-66 shrink'>
<text class='fs-48'>{{showCurrentMonth}}</text>月
</view>
<view class='day-list grow over-hidden'>
<scroll-view scroll-x="{{true}}" class='day-list-scroll row' bindscroll="dayScroll" scroll-left="{{scrollLeftInit}}px">
<view class="day-item {{prevMonth.weekDay == weekday ? 'weekday' : ''}}" wx:for="{{prevMonthDateArray}}" wx:for-item="prevMonth" id="day{{month}}{{prevMonth.day}}">
<view class='fs-24'>{{prevMonth.weekDay}}</view>
<view class='fs-32 mt-3'>{{prevMonth.day}}</view>
</view>
<view class="day-item {{currentMonth.day == day ? 'today' : ''}} {{currentMonth.weekDay == weekday ? 'weekday' : ''}}" wx:for="{{currentMonthDateArray}}" wx:for-item="currentMonth" id="day{{month+1}}{{currentMonth.day}}">
<view class='fs-24'>{{currentMonth.weekDay}}</view>
<view class='fs-32 mt-3'>{{currentMonth.day}}</view>
</view>
<view class="day-item {{nextMonth.weekDay == weekday ? 'weekday' : ''}}" wx:for="{{nextMonthDateArray}}" wx:for-item="nextMonth" id="day{{month+2}}{{nextMonth.day}}">
<view class='fs-24'>{{nextMonth.weekDay}}</view>
<view class='fs-32 mt-3'>{{nextMonth.day}}</view>
</view>
</scroll-view>
</view>
</view>
wxss:
.day-wrap{
background-color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
.month{
padding: 0 15px;
} .day-list-scroll{
white-space:nowrap;
}
.day-item{
padding: 2px 8px;
margin-right:15px;
text-align: center;
display: inline-block;
vertical-align: middle
}
.day-item.weekday{
background-color: #f2f2f2;
}
.day-item.today{
background-color: #ffdee8;
color: #ff5e2f
}
Happy Ending~
微信小程序——获取当天的前一个月至后一个月的更多相关文章
- 微信小程序-获取经纬度
微信小程序-获取经纬度 最近公司新功能 要求在外的市场人员 发送位置信息回来. 用的还是微信小程序开发.... 微信小程序 提供一个接口 getLocation 这个接口反回来的位置 相对实际位置 相 ...
- 微信小程序-获取当前城市位置及再次授权地理位置
微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...
- 微信小程序获取Access_token和页面URL生成小程序码或二维码
1.微信小程序获取Access_token: access_token具体时效看官方文档. using System; using System.Collections.Generic; using ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- C# 微信小程序获取openid sessionkey
项目介绍 1.微信小程序获取openid和session_key 2.后台使用C#开发 项目流程 准备工作 1 获取appid 1.1 下载微信web开发工具 https://developers.w ...
- JavaScript和微信小程序获取IP地址的方法
最近公司新加了一个需求,根据用户登录的IP地址判断是否重复登录,重复登录就进行逼退,那么怎么获取到浏览器的IP地址呢?最后发现搜狐提供了一个JS接口,可以通过它获取到客户端的IP. 接口地址如下: h ...
- 微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
- .Net之微信小程序获取用户UnionID
前言: 在实际项目开发中我们经常会遇到账号统一的问题,如何在不同端或者是不同的登录方式下保证同一个会员或者用户账号唯一(便于用户信息的管理).这段时间就有一个这样的需求,之前有个客户做了一个微信小程序 ...
- 微信小程序获取手机号码看这篇文章就够了
前言 微信小程序获取手机号码,从官方文档到其他博主的文档 零零散散的 (我就是这样看过来 没有一篇满意的 也许是我搜索姿势不对) 依旧是前人栽树 后人乘凉 系列.保证看完 就可以实现获取手机号码功能 ...
随机推荐
- [转帖]50 亿美元!微软签下毕马威!JEDI 100 亿美元订单之后又一大单!
50 亿美元!微软签下毕马威!JEDI 100 亿美元订单之后又一大单! https://mp.weixin.qq.com/s/K0SrFNSVK5aOu6TIzhN92Q 前段时间,微软击败亚马逊, ...
- centos 7安装jdk并封装service服务
一.概述 有一个Spring Cloud的jar包,文件名为:RDS.jar.必须要jdk1.8版本,需要部署在 Centos 7.5的服务器上面,最好能设置开机自启动! 二.安装jdk 关闭防火墙 ...
- BZOJ3514 / Codechef GERALD07 Chef and Graph Queries LCT、主席树
传送门--BZOJ 传送门--VJ 考虑使用LCT维护时间最大生成树,那么对于第\(i\)条边,其加入时可能会删去一条边.记\(pre_i\)表示删去的边的编号,如果不存在则\(pre_i = 0\) ...
- 多次执行echarts时出现 there is a chart instance already initialized on the dom
原因,多次使用 echarts.init(document.getElementById(this.options.zid)); 解决方案 设为全局
- c# 基于WebApi的快速开发框架FastFramework
一.框架简介 此框架是针对于webapi进行开发,项目分层是基于ABP框架的分层,更好的抽离业务逻辑关系,ABP是基于EF做数据访问层,本人个人比较喜欢Dapper,就把数据访问层封装成了Dapper ...
- SQL server字符串分割成表-表分割为字符串
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO ),)) )) as begin declare @i int set @SourceSql=rtri ...
- 【openshift】OC命令部署Openshift
OC命令部署Openshift # install openshift wget -c https://github.com/openshift/origin/releases/download/v3 ...
- springCloud学习6(Spring Cloud Sleuth 分布式跟踪)
springcloud 总集:https://www.tapme.top/blog/detail/2019-02-28-11-33 前言 在第四篇和第五篇中提到一个叫关联 id的东西,用这个东西来 ...
- SpringBoot + sqlserver+mybatis
一.maven引入 <dependency> <groupId>com.microsoft.sqlserver</groupId> <artifactId&g ...
- Python学习日记(三十三) Mysql数据库篇 一
背景 Mysql是一个关系型数据库,由瑞典Mysql AB开发,目前属于Oracle旗下的产品.Mysql是目前最流行的关系型数据库管理系统之一,在WEB方面,Mysql是最好的RDBMS(Relat ...