【uniapp3】分享一个自己写的h5日历组件

简言

分享一下自己基于uniapp写的日历组件。如果不太满足你的需求，可以自己改造。
在这里插入图片描述

日历

实现分析：

  • 页面显示 - 分为顶部显示和日历显示，我这里做了多行和单行显示两种情况，主要是当时看着手机的日历做的，手机上的日历单行和多行显示切换特别丝滑，但是我没实现出来。（我觉得限制原因是当时水平不够，再加上滚动用的uniapp的swipper组件，不能定制化实现）。
  • 分屏滚动 - 使用 uniapp的swipper组件，我这里，单行使用这个月周+上个月最后一周+下个月最后一周数据，多行使用这个月+上个月+下个月数据；这样处理的原因是在进行月份切换的时候可以先显示数据然后进行数据更新，实现无感无限切换滚动。
  • 各种事件 - 点击日期发送选中日期的数据。
  • 数据逻辑 - 主要是先确定你想要的数据结构，然后以这个为单位组装成行（周）数组或多行（月）数组。

没有自己实现滚动，也算是取了巧。感觉难点就是日期的数据处理 和 滚动，已经单多行切换了。

代码: uniapp写的 vue2和vue3应该都能用，样式注意使用了sass。

<template><view class="calendar"><view class="wrapper"><slotname="top":nowMonthText="nowMonthText":pickerMonth="pickerMonth":prevMonth="prevMonth":nextMonth="nextMonth"><view class="top"><view class="month-box"><view class="month-text"><view class="uni-input" @tap="pickerMonth">{{nowMonthText}}</view></view><view class="back-today" @tap="goToday">回到今天</view></view><view class="top-left"><view class="icon-arrow arrow-left" @tap="previousFn"></view><view class="icon-arrow arrow-right" @tap="nextFn"></view></view></view></slot><view class="calender-box"><view class="head-title"><viewclass="head-title-item"v-for="v in calenderTitleList":key="v">{{ v }}</view></view><!-- 一行显示 --><swiperv-if="showType === 1"class="row-swiper"circular:disable-programmatic-animation="true":duration="duration":current="swiperCurrent"@change="swipereChangFn"><swiper-itemv-for="(v, index) in calenderRowDaysList":key="index":item-id="v.label"><view class="row-days-list"><viewclass="days-list-item"v-for="(item, i) in v.value":key="`${index}-${i}`":class="{used: item.used,}"><viewclass="label"v-if="(isNowMonth && item.isNowMonth) || !isNowMonth":class="{disabled: item.disabled,}"@tap="clickDay(item)"><viewclass="text":class="{'active-item':nowSelectDay && nowSelectDay['time'] === item.time,'active-item--disabled':nowSelectDay &&nowSelectDay['time'] === item.time &&item.disabled,'today-text':item.label === '今' &&nowSelectDay &&nowSelectDay['time'] !== item.time &&!item.disabled,}">{{ item.label }}</view><viewv-show="!item.disabled && item.state"class="state-item text-state-item"></view><viewclass="item-adjust"v-if="!item.disabled && item.adjust && item.adjust.value":class="{ 'text-state-leave': item.adjust.value == '1' }">{{ item.adjust.value == "1" ? "休" : "课" }}</view></view></view></view></swiper-item></swiper><!-- 全行显示 --><swiperv-elseclass="all-swiper"circular:disable-programmatic-animation="true":duration="duration"@change="swipereChangFn":current="swiperCurrent":class="{'six-height':swiperDaysList[0] && swiperDaysList[0].value.length / 7 === 6,}"><swiper-itemv-for="(v, index) in swiperDaysList":key="index":item-id="v.label"><view class="days-list"><viewclass="days-list-item"v-for="(item, i) in v.value":key="`${index}-${i}`":class="{used: item.used,}"><viewclass="label"v-if="(isNowMonth && item.isNowMonth) || !isNowMonth":class="{disabled: item.disabled,}"@tap="clickDay(item)"><viewclass="text":class="{'active-item':nowSelectDay && nowSelectDay['time'] === item.time,'active-item--disabled':nowSelectDay &&nowSelectDay['time'] === item.time &&item.disabled,'today-text':item.label === '今' &&nowSelectDay &&nowSelectDay['time'] !== item.time &&!item.disabled,}">{{ item.label }}</view><viewv-show="!item.disabled && item.state"class="state-item"></view><viewclass="item-adjust"v-if="!item.disabled && item.adjust && item.adjust.value":class="{ 'text-state-leave': item.adjust.value == '1' }">{{ item.adjust.value == "1" ? "休" : "课" }}</view></view></view></view></swiper-item></swiper><view v-if="!hideArrow" class="arrow-wrapper" @click="showTypeChange"><viewclass="arrow-left":class="{ 'arrow-left--up': showType === 0 }"></view><viewclass="arrow-right":class="{ 'arrow-right--up': showType === 0 }"></view></view></view><view class="content"><slot :value="nowSelectDay"></slot></view></view><!-- 选择月份 --><uni-popup ref="monthPopup" :type="'bottom'"><view class="month-popup-box"><view class="month-top"><view class="cancel-text" @tap="cancelDateFn">取消</view><view class="ok-text" @tap="sucessDate">完成</view></view><picker-view:value="selectValue"@change="bindChange"class="picker-view"><picker-view-column><view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view></picker-view-column><picker-view-column><view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view></picker-view-column></picker-view></view></uni-popup></view>
</template><script>
export default {props: {isNowMonth: {//  是否只显示当前月日历值type: Boolean,default: false,},limitNowMoth: {//  限制只有当月type: Boolean,default: false,},showRowType: {type: Boolean,default: true,},dateStateList: {//  日历中的状态 [{date:'2023/12/1',value:1}]type: Array,default: () => [],},dateAdjustList: {//  日历中的调课状态 [{date:'2023/12/1',value:1}] 1为休，2为调课type: Array,default: () => [],},defaultValue: {type: String,default: "",},hideArrow: {type: Boolean,default: false,},},emits: ["ok", "cancel", "changeMonth"],data() {const date = new Date();const years = [];const year = date.getFullYear();const months = [];const month = date.getMonth() + 1;const day = date.getDate();for (let i = 1990; i <= date.getFullYear() + 30; i++) {years.push(i);}for (let i = 1; i <= 12; i++) {months.push(i);}return {monthValue: [years.findIndex((item) => item === year), month - 1], //  选择月份值years,year, //当前年months,month, //  当前月day, //  当前日selectValue: [], //  月份选择器选中的值//  日历calenderTitleList: ["一", "二", "三", "四", "五", "六", "日"],swiperDaysList: [], //  swiper全行显示列表 0-当月 1-下月 2-上月swiperCurrent: 0, //  swiper当前显示索引duration: 500, //  动画时长calenderRowDaysList: [], //  rowSwiper行显示列表nowSelectDay: null, //  当前选中值showType: 0, //  0 全部行显示 1，1行显示isJust: false, //  是否是校准};},computed: {nowMonthText() {const [yearIndex, monthIndex] = this.monthValue;let str = `${this.years[yearIndex]? this.years[yearIndex]: this.years[this.years.length - 1]}年${this.months[monthIndex]}月`;this.$emit("changeMonth", [this.years[yearIndex],this.months[monthIndex].toString().padStart(2, "0"),]);return str;},},watch: {showRowType: {handler(val) {if (val) {this.showType = 1;} else {this.showType = 0;}},immediate: true,},defaultValue(val) {if (val && val !== "") {this.nowSelectDay = {time: Date.parse(val),};}},},mounted() {this.updateCalender();},methods: {showTypeChange() {this.showType = 1 - this.showType;// this.goToday();this.updateCalender(false);this.initCurrent();},//  点击天数clickDay(item) {if (item.disabled) return;this.nowSelectDay = item;this.$emit("ok", this.nowSelectDay);},pickerMonth() {if (this.limitNowMoth) return;//  同步当前月份值this.selectValue = this.monthValue.map((item) => item);this.$refs.monthPopup.open();},//  选择月份赋值bindChange({ target }) {this.selectValue = target.value;},//  选择月份完成sucessDate() {this.monthValue = this.selectValue.map((item) => item);this.updateCalender(false);if (this.showType === 1) {//  一行显示//  默认回到第一项this.initCurrent();}this.$refs.monthPopup.close();},//  取消选择月份cancelDateFn() {this.$refs.monthPopup.close();},swipereChangFn(event) {if (this.isJust) return;const { currentItemId, current } = event.detail;this.swiperCurrent = current;switch (currentItemId) {case "next":this.nextMonth();break;case "pre":this.prevMonth();break;}//  月份改变后定位if (this.showType === 0) {setTimeout(() => this.initCurrent(), 50);} else {if (currentItemId === "next") {setTimeout(() => this.initCurrent(), 50);} else if (currentItemId === "pre") {const CalenderDaysList = this.getDayList(this.years[this.monthValue[0]],this.months[this.monthValue[1]]);let preArr = this.group(CalenderDaysList, 7);setTimeout(() => this.initCurrent(preArr.length - 1), 50);}}},//  默认回到第一项initCurrent(index = 0) {if (index === 0) this.isJust = true;this.duration = 0;this.swiperCurrent = index;setTimeout(() => {this.isJust = false;this.duration = 500;}, 0);},//  回到今天goToday() {const { years, year, month, day } = this;const nowDayDate = `${year}/${month}/${day}`;this.monthValue = [years.findIndex((item) => item === year), month - 1];this.updateCalender();//  默认点击今天this.nowSelectDay = {value: day, //  值label: "今", //  描述disabled: false, //  禁用isNowMonth: true,date: nowDayDate,time: new Date(year, month - 1, day).valueOf(),state: this.dateStateList.find((data) => data.date === nowDayDate),adjust: this.dateAdjustList.find((data) => data.date === nowDayDate),};//  生成日历碰到今日会触发，这里注释掉// this.$emit("ok", this.nowSelectDay);},//previousFn() {if (this.swiperCurrent !== 0) {this.swiperCurrent--;} else {this.swipereChangFn({detail: {currentItemId: "pre",current: 0,},});}},nextFn() {this.swiperCurrent++;},//  上一月prevMonth() {this.monthValue = this.monthValue.map((item, index) => {if (this.monthValue[1] <= 0 && index == 0) {return --item;} else if (this.monthValue[1] <= 0 && index == 1) {return 11;} else if (index === 1) {return --item;}return item;});this.updateCalender(false);},//  下一月nextMonth() {this.monthValue = this.monthValue.map((item, index) => {if (this.monthValue[1] >= 11 && index == 0) {return item + 1;} else if (this.monthValue[1] >= 11 && index == 1) {return 0;} else if (index === 1) {return ++item;}return item;});this.updateCalender(false);},//  更新日历updateCalender(updateNowDay = true) {const year = this.years[this.monthValue[0]];const month = this.months[this.monthValue[1]];const preYMArr = this.getMonthV(this.monthValue, 2);const nextYMArr = this.getMonthV(this.monthValue);const nowCalenderDaysList = this.getDayList(year, month);const preCalenderDaysList = this.getDayList(preYMArr[0], preYMArr[1]);const nextCalenderDaysList = this.getDayList(nextYMArr[0], nextYMArr[1]);if (this.year === year && this.month === month) {// 含有（今）年月for (let i in nowCalenderDaysList) {if (nowCalenderDaysList[i].label === "今" && updateNowDay) {this.nowSelectDay = nowCalenderDaysList[i];this.$emit("ok", this.nowSelectDay);if (this.showType !== 0) {this.swiperCurrent = Math.ceil((i * 1 + 1) / 7) - 1;}}}}if (this.showType === 0) {//  全行显示this.swiperDaysList = this.limitNowMoth? [{label: "now",value: nowCalenderDaysList,}, //  当月]: [{label: "now",value: nowCalenderDaysList,}, //  当月{label: "next",value: nextCalenderDaysList,}, //  下一月{label: "pre",value: preCalenderDaysList,},//  上一月];} else {//1 一行let nowArr = this.group(nowCalenderDaysList, 7);let preArr = this.group(preCalenderDaysList, 7);let nextArr = this.group(nextCalenderDaysList, 7);this.calenderRowDaysList = this.limitNowMoth? [...nowArr.map((arr) => {return { label: "now", value: arr };}), //  当月]: [...nowArr.map((arr) => {return { label: "now", value: arr };}), //  当月{label: "next",value: nextArr[0],}, //  下月第一行{label: "pre",value: preArr[preArr.length - 1],}, //  上月最后一行];}},//  根据当前月份值获取上下年月值getMonthV(value, type = 1) {let arr = []; //  当前月份if (type === 1) {//  默认获取下一月arr = value.map((item, index) => {if (value[1] >= 11 && index == 0) {return item + 1;} else if (value[1] >= 11 && index == 1) {return 0;} else if (index === 1) {return ++item;}return item;});} else {//  获取上一月arr = value.map((item, index) => {if (value[1] <= 1 && index == 0) {return --item;} else if (value <= 1 && index == 1) {return 11;} else if (index === 1) {return --item;}return item;});}return [this.years[arr[0]], this.months[arr[1]]];},//  根据年月获取天数列表getDayList(year, month) {let list = [];const startDate = new Date(year, month - 1, 1);const endDate = new Date(year, month, 1);const days = (endDate - startDate) / (1000 * 60 * 60 * 24);for (let i = 1; i <= days; i++) {const dateStr = `${year}/${month}/${i}`;let week = new Date(dateStr).getDay();if (i === 1) {let startIndex = week === 0 ? 6 : week - 1;//  上月天数列表let prevDays =(startDate - new Date(year, month - 2, 1)) / (1000 * 60 * 60 * 24);let preList = [];let piL = 7 + (startIndex - 7);for (let pi = 0; pi < piL; pi++) {const preDay = prevDays - piL + pi + 1;const date = `${year}/${month - 1}/${preDay}`;preList.push({value: preDay, //  值label: preDay, //  描述disabled: true, //  禁用isNowMonth: false,date,time: new Date(date).valueOf(),state: this.dateStateList.find((data) => data.date === date),adjust: this.dateAdjustList.find((data) => data.date === date),});}list.splice(0, startIndex, ...preList);}list.push({value: i, //  值label:new Date(year, month - 1, i).valueOf() ===new Date(this.year, this.month - 1, this.day).valueOf()? "今": i, //  描述disabled: false, //  禁用isNowMonth: true,date: dateStr,time: new Date(year, month - 1, i).valueOf(),state: this.dateStateList.find((data) => data.date === dateStr),adjust: this.dateAdjustList.find((data) => data.date === dateStr),});}//  补齐if (list.length % 7 !== 0) {let endIndex = 7 - (list.length % 7);//  下月天数列表let nextList = [];for (let ni = 0; ni < endIndex; ni++) {nextList.push({value: ni + 1, //  值label: ni + 1,disabled: true, //  禁用isNowMonth: false,date: `${year}/${month + 1}/${ni + 1}`,time: new Date(year, month, ni + 1).valueOf(),});}list.push(...nextList);}return list;},//  单数组分割成等长二维数组group(list, len) {let index = 0;const arr = [];while (index < list.length) {arr.push(list.slice(index, (index += len)));}return arr;},},
};
</script><style lang="scss" scoped>
.calendar {position: relative;background: #fff;
}.wrapper {font-family: PingFangSC-Regular, PingFang SC;color: #222;
}
// 顶部
.top {display: flex;align-items: center;justify-content: space-between;padding: 32rpx 48rpx 16rpx;.title {height: 48rpx;font-size: 34rpx;font-weight: 600;color: #222222;line-height: 48rpx;}.parting-line {width: 1rpx;height: 28rpx;background: #666;margin: 0 16rpx;}.month-box {display: flex;align-items: center;line-height: 37rpx;font-size: 32rpx;color: #333333;font-weight: 600;.back-today {font-size: 24rpx;font-weight: 400;line-height: 24rpx;color: $c-primary;margin-left: 12rpx;}}.top-left {display: flex;align-items: center;.icon-arrow {width: 28rpx;height: 28rpx;}.arrow-left {background: center/100%url(#{$img-url}/static/img/free/b-icon-arrow-left.png);}.arrow-right {margin-left: 24rpx;background: center/100%url(#{$img-url}/static/img/free/b-icon-arrow-right.png);}}
}
.row-swiper {height: 110rpx;
}
.all-swiper {height: 450rpx;transition: height ease 0.5s;
}
.six-height {height: 53 0rpx;
}
.calender-box {position: relative;padding: 24rpx 24rpx 0;// box-shadow: 30vw 5rpx 10rpx rgba($color: #eee, $alpha: 0.4),//   -30vw 5rpx 10rpx rgba($color: #eee, $alpha: 0.4);z-index: 10;.head-title {display: grid;grid-template-columns: repeat(7, 1fr);grid-gap: 10rpx;margin-bottom: 16rpx;&-item {width: 90rpx;height: 33rpx;font-size: 24rpx;font-weight: 400;color: #888888;line-height: 33rpx;text-align: center;}}.days-list {display: grid;height: 100%;grid-template-columns: repeat(7, 1fr);grid-gap: 10rpx;padding-top: 14rpx;align-content: stretch;}.row-days-list {display: grid;height: 100%;grid-template-columns: repeat(7, 1fr);grid-gap: 10rpx;margin-bottom: 10rpx;// align-content: space-around;align-content: stretch;padding-top: 14rpx;}.days-list-item {display: flex;align-items: flex-start;justify-content: center;width: 100%;height: 74rpx;font-size: 34rpx;font-family: Helvetica;color: #222222;line-height: 41rpx;.label {position: relative;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;.text {flex-shrink: 0;position: relative;width: 62rpx;height: 62rpx;line-height: 62rpx;text-align: center;}}.active-item {background-color: #006eff;color: #fff;border-radius: 50%;}.today-text {color: #006eff;}.active-item--disabled {opacity: 0.5;}.state-item {flex-shrink: 0;margin-top: 4rpx;width: 10rpx;height: 10rpx;background: #006eff;border-radius: 50%;}.text-state-item {width: 8rpx;height: 8rpx;background-color: #ff7400;}.item-adjust {position: absolute;top: -24rpx;right: -6rpx;width: 20rpx;height: 20rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 20rpx;color: #666666;text-align: right;font-style: normal;}.text-state-leave {color: #ff7400;}.disabled {color: #eaeaea;}}.arrow-wrapper {display: flex;align-items: center;justify-content: center;width: 50rpx;height: 40rpx;margin: 10rpx auto;.arrow-left {width: 20rpx;height: 4rpx;background-color: #ddd;border-radius: 2rpx 0 0 2rpx;transform: rotate(30deg);transform-origin: center right;transition: transform ease-in 0.3s;}.arrow-right {width: 20rpx;height: 4rpx;background-color: #ddd;border-radius: 0rpx 2rpx 2rpx 0;transform: rotate(-30deg);transform-origin: center left;transition: transform ease-in 0.3s;}.arrow-left--up {transform: rotate(-30deg);}.arrow-right--up {transform: rotate(30deg);}}
}.month-popup-box {font-size: 30rpx;.month-top {display: flex;align-items: center;justify-content: space-between;border-bottom: 1rpx solid #ccc;padding: 28rpx 32rpx;.ok-text {font-size: 30rpx;color: #006eff;line-height: 42rpx;}.cancel-text {color: #999;font-size: 30rpx;line-height: 42rpx;}}.picker-view {width: 100%;height: 400rpx;text-align: center;}
}:deep(.popup .uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box) {max-height: 100vh;
}
</style>

使用，记得引用先。
在这里插入图片描述

结语

结束了。本来想写更多呢，结果代码字数太多，太卡了，有兴趣自己看吧。

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

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

相关文章

rhce作业4

rhce作业4

问题&#xff1a; 1.搭建dns服务器能够对自定义的正向或者反向域完成数据解析查询。 2.配置从DNS服务器&#xff0c;对主dns服务器进行数据备份。 配置&#xff1a; 主服务器配置 安装 关闭防火墙 主配置文件定义正反向解析域 正向解析资源记录文件 反向解析记录文件 重启…
阅读更多...
MybatisPlus入门(八)MybatisPlus-DQL编程控制

MybatisPlus入门(八)MybatisPlus-DQL编程控制

一、字段映射与表名映射 数据库表和实体类名称一样自动关联&#xff0c;数据库表和实体类有部分情况不一样。 问题一&#xff1a;表名与编码开发设计不同步&#xff0c;表名和实体类名称不一致。 解决办法&#xff1a; 在模型类上方&#xff0c;使用TableName注解&#xf…
阅读更多...
摩尔斯电码

摩尔斯电码

偏方记忆法 F .._. 滴滴打滴 很费钱 F 费 R ._. 滴打滴 洗发水广告 滴答滴&#xff0c;滴答滴 大家好才是正的好 G 和Q 可以一起记忆有相通点 把G 也看成一个圈&#xff0c;相交的地方一个点&#xff0c;因为圈没满缺一个_ K 和 Y 可以一起记忆 把K躺着看…
阅读更多...
Vue Router进阶详解

Vue Router进阶详解

导航守卫 若依框架登录鉴权详解&#xff08;动态路由&#xff09;_若依鉴权-CSDN博客 完整的导航解析流程 导航被触发&#xff1a; 当用户点击页面中的链接、使用编程式导航&#xff08;如router.push或router.replace&#xff09;或手动输入URL时&#xff0c;导航流程被触发。…
阅读更多...
如何在Linux命令行中使用GhatGPT

如何在Linux命令行中使用GhatGPT

2、验明正身&#xff0c;证明我的所在地是国内 3、第一次提问 4、第二次提问 5、问他一首古诗 6、话不多说&#xff0c;现在来展示他的安装过程 7、输入GitHub的网址 https://github.com/aandrew-me/tgpt 8、详情页向下翻 9、到终端输入 下列命令&#xff0c;等待安装&#x…
阅读更多...
iOS灵动岛动画小组件怎么播放动画

iOS灵动岛动画小组件怎么播放动画

这个灵动岛相关的展示位置分几个地方&#xff1a; 紧凑型&#xff0c;最小化&#xff0c;扩展型&#xff0c;还有锁屏位置 我们先来看一下我这边实现的动画效果 demo下载&#xff1a; iOS灵动岛GIF动画 灵动岛样式 灵动岛有三种渲染模式&#xff1a; 第一种是 紧凑型&…
阅读更多...
【electron+vue3】使用JustAuth实现第三方登录（前后端完整版）

【electron+vue3】使用JustAuth实现第三方登录（前后端完整版）

实现过程 去第三方平台拿到client-id和client-secret&#xff0c;并配置一个能够外网访问回调地址redirect-uri供第三方服务回调搭建后端服务&#xff0c;引入justauth-spring-boot-starter直接在配置文件中定义好第一步的三个参数&#xff0c;并提供获取登录页面的接口和回调…
阅读更多...
vscode makfile编译c程序

vscode makfile编译c程序

编译工具安装 为了在 Windows 上安装 GCC&#xff0c;您需要安装 MinGW-w64。 MinGW-w64 是一个开源项目&#xff0c;它为 Windows 系统提供了一个完整的 GCC 工具链&#xff0c;支持编译生成 32 位和 64 位的 Windows 应用程序。 1. 下载MinGW-w64源代码&#xff0c;如图点…
阅读更多...
这个操作惊呆我了！海康存储 R1竟然可以这样部署Portainer

这个操作惊呆我了！海康存储 R1竟然可以这样部署Portainer

这个操作惊呆我了&#xff01;海康存储 R1竟然可以这样部署Portainer 哈喽小伙伴们好&#xff0c;我是Stark-C~ 最近到手了海康存储&#xff08;HIKVISION&#xff09;私有云R1 &#xff0c;该机的卖点还是很多的&#xff0c;比如优秀的做工&#xff0c;强大的配置&#xff0…
阅读更多...
雷电模拟器ls内部操作adb官方方法

雷电模拟器ls内部操作adb官方方法

正常情况下&#xff0c;我们通过adb操作模拟器&#xff0c;如安装软件、运行shell命令等&#xff0c;但是用windows系统&#xff0c;adb就经常掉线&#xff0c;端口被占用&#xff0c;或者发现不到设备&#xff0c;对于调试或者自动化非常痛苦。就在雷电安装目录下&#xff0c;…
阅读更多...
TS学习笔记

TS学习笔记

一、TS运行环境搭建 1、安装 安装命令 npm i -g typescript 第一步&#xff1a;新建index.html和demo.ts 第二步&#xff1a;在index.html引入demo.ts文件 第三步&#xff1a;运行TS的命令 tsc demo.ts 注意&#xff1a;运行命令后&#xff0c;会将ts文件转换成js文件 …
阅读更多...
使用Jest进行JavaScript单元测试

使用Jest进行JavaScript单元测试

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Jest进行JavaScript单元测试 引言 Jest 简介 安装 Jest 创建基本配置 编写测试用例 运行测试 快照测试 模拟函数 代码覆盖率…
阅读更多...
机器学习算法之回归算法

机器学习算法之回归算法

一、回归算法思维导图 二、算法概念、原理、应用场景和实例代码 1、线性回归 1.1、概念 ‌‌线性回归算法是一种统计分析方法&#xff0c;用于确定两种或两种以上变量之间的定量关系。‌ 线性回归算法通过建立线性方程来预测因变量&#xff08;y&#xff09;和一个或多个自变量…
阅读更多...
Android中同步屏障(Sync Barrier)介绍

Android中同步屏障(Sync Barrier)介绍

在 Android 中&#xff0c;“同步屏障”&#xff08;Sync Barrier&#xff09;是 MessageQueue 中的一种机制&#xff0c;允许系统临时忽略同步消息&#xff0c;以便优先处理异步消息。这在需要快速响应的任务&#xff08;如触摸事件和动画更新&#xff09;中尤为重要。 在 An…
阅读更多...
突破职场瓶颈，实现个人成长

突破职场瓶颈，实现个人成长

在职场生涯中&#xff0c;我们总会遇到各种各样的瓶颈。这些瓶颈如同成长道路上的荆棘&#xff0c;让我们感到困惑、焦虑甚至恐惧。然而&#xff0c;瓶颈并非无法逾越&#xff0c;只要我们掌握正确的方法&#xff0c;勇敢面对&#xff0c;就能顺利突破&#xff0c;实现个人成长…
阅读更多...
ubuntu 24.04中安装 Easyconnect，并解决版本与服务器不匹配问题

ubuntu 24.04中安装 Easyconnect，并解决版本与服务器不匹配问题

下载安装包 下载地址 https://software.openkylin.top/openkylin/yangtze/pool/all/ 页面搜索 easyconnect 选择 easyconnect_7.6.7.3.0_amd64.deb安装 sudo dpkg --install easyconnect_7.6.7.3.0_amd64.deb卸载 sudo dpkg --remove easyconnect出现的问题 安装以后第…
阅读更多...
判断是否是变位词

判断是否是变位词

题目&#xff1a;给定两个单词&#xff0c;判断这两个单词是否是变位词。如果两个单词的字母完全相同&#xff0c;只是位置有所不同&#xff0c;则称这两个单词为变位词。例如eat和tea是变位词。 答&#xff1a;问题分析&#xff1a;判断是否为变位词&#xff0c;只需要分别统计…
阅读更多...
解决python matplotlib画图无法显示中文的问题

解决python matplotlib画图无法显示中文的问题

在用matplotlib做一个简单的可视化统计时&#xff0c;由于标签是中文&#xff0c;无法显示&#xff0c;只是显示出来一些方框&#xff08;如图&#xff09; 问题在于&#xff0c;当前matplotlib使用的字体不支持中文&#xff0c;我们进行替换就可以了 我想替换为黑体&#xff…
阅读更多...
Docker：网络

Docker：网络

Docker&#xff1a;网络 Docker 网络架构CNMLibnetwork驱动网络类型 命令docker network lsdocker network inspectdocker network createdocker network connectdocker network disconnectdocker network prunedocker network rm 网络操作bridgehostcontainernone Docker 网络…
阅读更多...
力扣排序268题 数字丢失

力扣排序268题 数字丢失

题目&#xff1a; 丢失的数字 给定一个包含[0,n]中n各数的数组nums&#xff0c;找出[0,n]这个范围 内没有出现在数组中的那个数。 示例1&#xff1a; 输出&#xff1a;n 3,因为有3个数字&#xff0c;所以所有的数字都在范围 [0,3]内。2是丢失的数字&#xff0c;因为它没有出现…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023