小程序实现横向滑动日历效果
作者:焕想-不怎么回复博客 发布时间:2024-04-10 16:19:46
标签:小程序,滑动,日历
本文实例为大家分享了小程序实现横向滑动日历效果的具体代码,供大家参考,具体内容如下
<scroll-view class="scroll-view_H" scroll-x>
<view class='list' style='width:{{ width }}rpx'>
<view bindtap="select" wx:for="{{ calendar }}" wx:key="" wx:for-item="item" wx:for-index="index" data-index="{{ index }}" class='listItem {{index==currentIndex? "current":""}}'>
<text class='name'>{{ item.week }}</text>
<text class='date'>{{ item.date }}</text>
</view>
</view>
</scroll-view>
js:
function getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
}
// 计算每月第一天是星期几
function getFirstDayOfWeek(year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
}
const date = new Date();
const cur_year = date.getFullYear();
const cur_month = date.getMonth() + 1;
const cur_date = date.getDate();
const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
//利用构造函数创建对象
function calendar(date, week) {
this.date = cur_year + '-' + cur_month + '-' + date;
if (date == cur_date) {
this.week = "今天";
} else if (date == cur_date + 1) {
this.week = "明天";
} else {
this.week = '星期' + week;
}
}
//当前月份的天数
var monthLength = getThisMonthDays(cur_year, cur_month)
//当前月份的第一天是星期几
var week = getFirstDayOfWeek(cur_year, cur_month)
var x = week;
for (var i = 1; i <= monthLength; i++) {
//当循环完一周后,初始化再次循环
if (x > 6) {
x = 0;
}
//利用构造函数创建对象
that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])
x++;
}
//限制要渲染的日历数据天数为7天以内(用户体验)
var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7)
that.setData({
calendar: flag
})
selectd = flag;
// console.log(selectd);
var ret_id = [];
const lengths = selectd.length
for (let i = 0; i < lengths; i++) {
ret_id[i] = selectd[i].date;
}
choosedate = ret_id[0];
//设置scroll-view的子容器的宽度
that.setData({
width: 186 * parseInt(that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length : 7)
})
CSS:
/*日历开始 */
scroll-view{
height: 128rpx;
width: 101%;
position:fixed;
top:355rpx;
}
scroll-view .list{
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
}
scroll-view .listItem{
text-align: center;
width:187rpx;
height: 128rpx;
background: #f4f4f4;
padding-top: 30rpx;
box-sizing: border-box;
display: inline-block;
}
scroll-view .listItem text{
display: block;
}
scroll-view .listItem .name{
font-size: 25rpx;
}
scroll-view .listItem .date{
font-size: 25rpx;
}
scroll-view .current{
background-color:pink;
width:200rpx;
position:relative;
}
scroll-view .current text{
color: #fff;
}
更多精彩的日历效果请学习参考专题:javascript日历插件
来源:https://blog.csdn.net/qq_38815953/article/details/79713729
0
投稿
猜你喜欢
- smtplib模块负责发送邮件:是一个发送邮件的动作,连接邮箱服务器,登录邮箱,发送邮件(有发件人,收信人,邮件内容)。email模块负责构
- function chinese2unicode(Str) &nbs
- Java 使用Sqllite 数据库如何生成db文件 &n
- 在这篇文章里,我们会聊一聊为什么 Python 决定不支持 switch 语句。为什么想要聊这个话题呢?主要是因为 switch 在其它语言
- 线性表 线性表是线性结构的抽象,线性结构的特点是结构中的数据元素之间存在一对一的线性关系。 数据元素之间的位置关系是一个接一个的排列: .除
- 本文实例讲述了Python图像处理之图像的缩放、旋转与翻转实现方法。分享给大家供大家参考,具体如下:图像的几何变换,如缩放、旋转和翻转等,在
- idea git切换分支方法点击下方的git,checkout出要开发的分支切换多个分支后如何保maven正常idea 多个分支来回切换后会
- 成员运算符Python 提供了两个成员运算符来检查或验证值的成员资格。它测试序列中的成员资格,例如字符串、列表或元组。 in 运算
- 1 简介kepler.gl作为开源地理空间数据可视化神器,也一直处于活跃的迭代开发状态下。而在前不久,kepler.gl正式发布了其2.4.
- 1、存储过程基本语法: create procedure sp_name() begin ...... end; 2、如何调用: call
- 本次爬取网站为opgg,网址为:” http://www.op.gg/champion/statistics”由网站界面可以看出,右侧有英雄
- numpy包(模块)几乎总是用于Python中的数值计算。这个软件包为Python提供了高性能的向量、矩阵、张量数据类型。它是在C和Fort
- 在Python 2.7中,一个float的repr返回最接近十七位数的十进制数;这足以精确地识别每个可能的IEEE浮点值.浮点数的str类似
- 在给blog加上无刷新搜索和即时验证检测后,又看了下代码,感觉太过麻烦,就把XMLHttpRequest请求封装到一个类里面,用起来方便多了
- 首先说明,伪造访问来路不是什么光明正大的事情,目的就是为了欺骗服务器。原本以为给 XMLHTTP 对象增加一个 Referer 的heade
- 和很多语言一样,Python中也分为简单赋值、浅拷贝、深拷贝这几种“拷贝”方式。在学习过程中,一开始对浅拷贝理解很模糊。不过经过一系列的实验
- 昨天给公司服务器重做了一下系统,遇到Asp附件无法上传,之前服务器上使用好好的,怎么重做了就不正常了,于是一番google,baidu,下面
- 1. 引言山脊图一般由垂直堆叠的折线图组成,这些折线图中的折线区域间彼此重叠,此外它们还共享相同的x轴.山脊图经常以一种相对不常见且非常适合
- 前言python内置了一些非常巧妙而且强大的内置函数,对初学者来说,一般不怎么用到,我也是用了一段时间python之后才发现,哇还有这么好的
- 由于工作需要,所以前一阵子将IE升级到了8.0,结果今天发现出现一个问题,eWebEditor的在线编辑器不好用了,仔细想想,肯定是IE8搞