微信小程序 typescript 开发日历界面

1.界面代码

<view class="o-calendar"><view class="o-calendar-container" ><view class="o-calendar-titlebar"><view class="o-left_arrow" bind:tap="prevMonth">《</view>{{year}}年{{month}}月<view class="o-right_arrow" bind:tap="nextMonth">》</view><view class="o-btn-current-month" bind:tap="locateThisMonth"><image class="o-btn-current-month-img" src="../../images/month.svg" /></view></view><view class="o-calendar-weekdays"><view wx:for="{{weekdays}}" wx:key="id" class="o-calendar-weekdays-item" >{{item}}</view></view><view class="o-calendar-weeks"><block wx:for="{{calendarData}}" wx:key="index" ><view class="o-calendar-week"><block wx:for="{{item}}" wx:key="index"><block wx:if="{{item===0}}"><view class="o-calendar-item"></view></block><block wx:else><block wx:if="{{today && item===day}}"><view class="o-calendar-day o-calendar-day-cur" bindtap="selectDate" data-value='{{item}}'>{{item}}</view></block><block wx:elif="{{item===selectedDay}}"><view class="o-calendar-day o-calendar-day-selected" bindtap="selectDate" data-value='{{item}}'>{{item}}</view></block><block wx:else><view class="o-calendar-day" bindtap="selectDate" data-value='{{item}}'>{{item}}</view></block></block> </block></view></block></view></view> </view>

2.样式设置

page{--o-calendar-background-color: #F1EBFE;
}.o-calendar {width: 100%;display: flex;flex-direction: column;box-sizing: border-box;padding: 10rpx 30rpx;
} .o-calendar-container{padding: 0rpx 16rpx;background-color: var(--o-calendar-background-color);border-radius: 20rpx;
}.o-calendar-titlebar{display: flex;justify-content: center;align-items: center;height: 50rpx;font-size: 18px;font-weight: bold;padding-top: 20rpx;
}.o-left_arrow {width: 50rpx;height: 50rpx;position: absolute;left: 180rpx;
}.o-right_arrow {width: 50rpx;height: 50rpx;position: absolute;right: 180rpx;
}.o-btn-current-month{width: 50rpx;height: 50rpx;position: absolute;right: 80rpx;
}
.o-btn-current-month-img{width: 100%;height: 100%;
}.o-calendar-weekdays{width: 100%;height: 80rpx;display: flex;justify-content: space-between;align-items: center;
}
.o-calendar-weekdays-item{width: 60rpx;line-height: 60rpx;text-align: center;margin: 5rpx;
}.o-calendar-week{width: 100%;display: flex;justify-content: space-between;
}.o-calendar-item{width: 60rpx;height: 60rpx;position: relative;line-height: 60rpx;margin: 5rpx;
}.o-calendar-day {width: 60rpx;height: 60rpx;position: relative;display: flex;line-height: 60rpx;text-align: center;justify-content: center;margin: 5rpx;border-radius: 50%;cursor: pointer;background-color: #fff;
}.o-calendar-day-cur{font-weight: bold;color: #fff;background-color: #F6AD77;
}.o-calendar-day-selected{font-weight: bold;color: #fff;background-color: rgb(7, 3, 1);
}

3.typescript脚本处理

  /*** 页面的初始数据*/data: {year: 0, //记录年month: 0, //记录月day:0,//记录日selectedDay:0,calendarData: [], //记录日期weekdays: ['日', '一', '二', '三', '四', '五', '六'],today:false,},/*** 生命周期函数--监听页面加载*/onLoad() {this.renderCalendar();},renderCalendar: function () {//获取当前日期const currentDate:Date = new Date();const currentYear:number = currentDate.getFullYear();const currentMonth:number = currentDate.getMonth() + 1;const currentDay:number = currentDate.getDate();//获取年月日,未设置时默认当前日期const year:number = this.data.year || currentYear;const month:number = this.data.month || currentMonth;const day:number = this.data.day || currentDay;// 获取指定月份的总天数const totalDays:number = new Date(year, month, 0).getDate();// 获取指定月份第一天是星期几let firstDayOfWeek:number = new Date(year, month - 1, 1).getDay();//构建周期偏移实际数据let total = firstDayOfWeek + totalDays;// Math.ceil(total/7) -> 实际周期数total = Math.ceil(total/7)*7;// 定义存放日历数据的数组const calendarData:number[][] = [];// 初始化一个星期的数组let week:number[] = [];let num:number =0;for(let i=1;i<=total;i+=7){week = [];for(let j=0;j<7;j++){num = i-firstDayOfWeek +jweek.push(num<0 || num>totalDays? 0: num)}calendarData.push(week);}// 将生成的日历数据更新到页面数据中,使页面重新渲染this.setData({year: year,month: month,day:day,calendarData: calendarData as any,selectedDay:this.data.selectedDay,today: year==currentYear && month==currentMonth && day==currentDay,});
},selectDate(event: any){//console.log(event);this.setData({selectedDay: event.currentTarget.dataset.value,});},prevMonth(event: any){this.data.month -= 1;if(this.data.month==0){this.data.year -= 1;this.data.month = 12;}this.data.selectedDay=0;this.renderCalendar();},nextMonth(event: any){this.data.month += 1;if(this.data.month==13){this.data.year += 1;this.data.month = 1;}this.data.selectedDay=0;this.renderCalendar();},locateThisMonth(event: any){this.data.year=0;this.data.month=0;this.data.day=0;this.data.selectedDay=0;this.renderCalendar();},

4.效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40374.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Maven:下载配置教学(2024版 最简)

文章目录 一、Maven下载1.1 下载官网1.2 下载压缩包1.3 解压1.4 创建repo文件夹 二、Maven配置2.1 环境变量2.1.1 新建系统变量2.1.2 添加Path 2.2 阿里云镜像2.3 JDK2.4 本地仓库2.5 conf文件的全部内容2.6 测试安装配置是否成功 三、IDEA中配置Maven3.1 新配置3.2 推荐配置 四…

Java NIO的Files类删除文件

public static void main(String[] args) {String path "/path/to/your/file.txt"Path pathPng Paths.get(path);deletePng(pathPng,originalFilename);}public void deletePng(Path dir, String fileNameToDelete) {log.info("开始执行删除数据逻辑");tr…

在Clion使用CubeMX Stm32的步骤

Step1 准备软件&#xff0c;安装环境&#xff1a; 1. cubemx v6.5.0&#xff08;可以兼容以前版本的project&#xff09; https://www.st.com.cn/zh/development-tools/stm32cubemx.html STM32CubeMX 默认安装目录, 6.5版本可以兼容老版本 C:\Program Files\STMicroelectroni…

应用安全:OWASP Top 10与Java防御策略

在当今的软件开发领域&#xff0c;应用安全已经成为一个不可忽视的话题。OWASP Top 10是一个广为人知的安全风险列表&#xff0c;它列出了最常见的Web应用程序安全漏洞。本文将详细介绍OWASP Top 10中的每个漏洞&#xff0c;并提供Java语言的防御策略和代码示例&#xff0c;帮助…

Redis数据迁移-RedisShake

redis-shake是阿里云Redis团队开源的用于Redis数据迁移和数据过滤的工具。 一、基本功能 redis-shake它支持解析、恢复、备份、同步四个功能 恢复restore&#xff1a;将RDB文件恢复到目的redis数据库。 备份dump&#xff1a;将源redis的全量数据通过RDB文件备份起来。 解析deco…

CM311-5_系列通用_gk6323_安卓9_U盘卡刷短接强刷固件(带教程)

魔百和CM311-5_系列通用_gk6323V100C_安卓9_优盘卡刷短接强刷固件包&#xff08;带教程&#xff09;&#xff0c;可以解决开ADB刷机方法 进不去rec的问题。 CM311-5系列的盒子都能用&#xff0c;下面CM311-5 这个系列的强刷固件和教程分享给大家&#xff0c;进不去rec的兄弟们…

一分钟教你设置代理服务器的IP地址

许多人购买完代理IP却不会使用&#xff0c;我们来学习一下如何手把手地设置代理服务器的IP地址。无论是为了访问受限网站还是保护隐私&#xff0c;设置代理IP都是一个非常实用的技能。让我们一起来看看怎么做吧&#xff01; 设置代理服务器的IP地址步骤 1. 选择代理服务提供商…

Chrome插件elasticsearch-head的安装和使用

文章目录 一、安装二、使用 一、安装 本来是想直接在Chrome扩展程序商店里安装的&#xff0c;但是它让我更新浏览器版本&#xff0c;因此就自己下载了.crx文件 elasticsearch-head的git地址是这个 我直接点进了crx然后点偏右上角下载标志下载&#xff08;光标悬浮显示download…

数据识别概述

数据识别场景 数据识别确实可以分为两种主要类型&#xff1a;直接识别和间接识别&#xff08;或称为从文本中发现&#xff09;。下面我将详细解释这两种类型&#xff1a; 直接识别&#xff1a; 定义&#xff1a;直接识别是指直接判断某个数据是否符合特定的标准或条件。应用场…

《安全大模型技术与市场研究报告》发布,海云安榜上有名

近日&#xff0c;网络安全产业研究机构“数说安全”发布2024《安全大模型技术与市场研究报告》&#xff08;以下简称“报告”&#xff09;。 海云安凭借在开发安全领域的优秀业务能力以及在大模型相关技术研究方面的成就得到了认可&#xff0c;入选“安全开发大模型推荐供应商”…

高效使用 Guzzle:POST 请求与请求体参数的最佳实践

介绍 在现代爬虫技术中&#xff0c;高效发送 HTTP 请求并处理响应数据是关键步骤之一。Guzzle 是一个强大的 PHP HTTP 客户端&#xff0c;广泛应用于发送同步和异步请求。本文将介绍如何使用 Guzzle 发送 POST 请求&#xff0c;特别是如何传递请求体参数&#xff0c;并结合代理…

【风力发电】风力涡轮机模型搭建

目录 引言风力涡轮机数学原理风力涡轮机matlab仿真引言 风力发电领域仿真主要包含风力涡轮机模型、PMSM模型与控制算法,控制对象模型的建立是研究的基础,其中风力涡轮机的仿真则是第一步。为保证后续研究的严谨性,本文将针对《An Improved Mechanical Sensorless Maximum Po…

【Python】Python的安装与环境搭建

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️Python】 文章目录 前言Python下载环境配置测试环境变量是否配置成功配置环境变量 运行Python交互式解释器&#xff1a;命令行脚本集成开发环境&#xff08;IDE&#xff1a;Integrated Development E…

检测水管缺水的好帮手-管道光电液位传感器

管道光电液位传感器是现代清水管道管理中的重要技术创新&#xff0c;不仅提高了检测液位的精确度&#xff0c;还解决了传统机械式和电容式传感器存在的诸多问题&#xff0c;成为检测管道缺水的可靠利器。 该传感器采用先进的光学感应原理&#xff0c;利用红外光学组件通过精密…

【vite创建项目】

搭建vue3tsvitepinia框架 一、安装vite并创建项目1、用vite构建项目2、配置vite3、找不到模块 “path“ 或其相对应的类型声明。 二、安装element-plus1、安装element-plus2、引入框架 三、安装sass sass-loader1、安装sass 四、安装vue-router-next 路由1、安装vue-router42搭…

labview技巧——AMC框架安装

AMC工具包的核心概念是队列&#xff0c;队列是一种先进先出&#xff08;FIFO&#xff0c;First In First Out&#xff09;的数据结构&#xff0c;适用于处理并发和异步任务。在LabVIEW中&#xff0c;队列可以用于在不同VI之间传递数据&#xff0c;确保消息的有序处理&#xff0…

你觉得胡锡进还能回本吗?还能融资买纳指?

7月3日&#xff0c;胡锡进发布最新炒股日记&#xff1a;这几天的股票表现总体很差&#xff0c;除了今天&#xff0c;之前连续几天都输给了沪指&#xff0c;因此虽然今天我只赔了546元&#xff0c;但#胡锡进总亏损达到8.5万#。这是我今年一月份2800点以下时的亏损额。胡锡进称已…

如何快速选择短剧系统源码:高效构建您的在线短剧平台

在数字化时代&#xff0c;短剧作为一种新兴的娱乐形式&#xff0c;受到了广泛的欢迎。随着市场需求的增长&#xff0c;构建一个在线短剧平台成为了很多创业者和开发者的目标。而选择正确的短剧系统源码则是实现这一目标的关键步骤。本文将为您提供一些实用的指导&#xff0c;帮…

25届最近5年华北电力大学自动化考研院校分析

华北电力大学&#xff08;北京保定&#xff09; 目录 一、学校学院专业简介 二、考试科目指定教材 三、近5年考研分数情况 四、近5年招生录取情况 五、最新一年分数段图表 六、初试大纲复试大纲 七、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指…

如何在 Selenium Python 中解决验证码 | 2024 完整指南

由于在进行网络自动化时遇到验证码是让许多人感到不知所措的问题。这些验证码专为区分人类用户和自动化脚本而设计&#xff0c;对于使用Selenium进行网络爬虫或自动化任务而言&#xff0c;无疑是一个巨大的挑战。2024年的完全指南将为您提供全面的解决方案&#xff0c;帮助您高…