android 横向滑动日历,小程序实现横向滑动日历效果

最新推荐文章于 2021-06-02 14:51:01 发布

Min Xu

最新推荐文章于 2021-06-02 14:51:01 发布

阅读量480

点赞数

文章标签： android 横向滑动日历

本文详细介绍了如何在小程序中使用JavaScript和CSS创建一个可滑动的日历组件，通过计算日期、构造对象和动态渲染，展示了从获取本月天数到设置scroll-view宽度的整个过程。适合开发者学习和实践日历插件开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文实例为大家分享了小程序实现横向滑动日历效果的具体代码，供大家参考，具体内容如下

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日历插件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。