自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

西门吹雪

风萧萧兮易水寒

  • 博客(25)
  • 收藏
  • 关注

原创 【Three.js】Three.js中的纹理—图像应用和属性调整

Three.js中的纹理功能为我们创造出更加真实和生动的3D场景提供了强大的工具。通过将图像作为纹理应用到几何体上,并调整纹理的属性,我们可以实现丰富多样的视觉效果,为用户带来更好的交互体验。对于那些对于创造逼真图形和动画的开发者和设计师来说,Three.js中的纹理功能无疑是一个不可或缺的重要组成部分。

2023-07-25 17:03:32 4401 84

原创 【Three.js基础入门】:Three.js中的灯光

在Three.js中,灯光是为了让3D场景更加真实和逼真而存在的。灯光可以用来模拟现实中的光照效果,例如阴影、反射和折射等。在本文中,我们将介绍Three.js中的不同类型的灯光,以及如何在场景中添加和调整它们的属性。

2023-07-21 17:47:19 2466 6

原创 【Three.js基础入门】:创建你的第一个3D场景

Three.js是一种强大的JavaScript库,用于在Web浏览器中创建交互式的3D图形和动画。无需熟练的图形编程经验,你也可以通过Three.js轻松地构建令人惊叹的3D场景。本文将带你逐步学习如何入门Three.js,从创建一个简单的3D场景开始。并且在文末还提供两个3d星空效果

2023-07-21 16:02:29 3748 1

原创 【VUE】解决VU2项目图片视频加载缓慢/首屏加载白屏的问题

前端项目中,有时候会出现图片视频加载缓慢、首屏加载白屏的问题之前写了一篇在VU3项目中的解决方案,现在讲一下在 Vue2 项目中的解决方法,方法思路都差不多,在代码示例上会有一些小差别。

2023-07-17 13:25:10 6360 30

原创 【VUE】解决图片视频加载缓慢/首屏加载白屏的问题

在 Vue3 项目中,有时候会出现图片视频加载缓慢、首屏加载白屏的问题,文中会介绍几种解决方案,希望可以帮到你

2023-07-13 17:28:36 36356 68

原创 【架构设计】高并发架构实战:从需求分析到系统设计

高并发是指系统在同一时间内处理的请求量非常大,通常是指每秒处理的请求量达到数千到数百万级别。在互联网应用中,高并发是一个非常常见的问题,因为随着用户数量的增加,系统需要处理的请求量也会越来越大。高并发的处理需要系统在短时间内处理大量的请求,因此对系统的稳定性和性能提出了很高的要求。

2023-07-11 18:01:58 13801 156

原创 【活动】如何在工作中管理情绪

近期发生的新闻热点再度引发公众对稳定情绪和心理健康的关注。有时候我们遇到的最大的敌人,不是运气也不是能力,而是失控的情绪和口无遮拦的自己。如何在工作中保持稳定的情绪?谈谈我的看法。

2023-07-07 14:00:06 4765 25

原创 【ECharts系列】ECharts 鼠标悬停线格式化

在这个回调函数中,依然将时间戳转换为Date对象,然后使用getHours()、getMinutes()和getSeconds()方法获取时分秒数值,最后使用字符串拼接的方式将它们组合成"时:分:秒"的字符串格式。通过类似以上示例代码的方式,可以将ECharts折线图的X轴时间戳格式化为任意指定的时间格式,并在鼠标悬停时显示友好的引导线,同时引导线上的数据值也被格式化为指定的时间格式。折线图有很多数据,鼠标悬停时,针对X轴,Y轴数据进行格式化,例如X的时间戳,格式化为时分秒,Y轴保留两位小时。

2023-07-07 13:18:53 10304 44

原创 【ECharts系列】ECharts 图表渲染问题&解决方案

echats 渲染,第一次的时候只出现Y轴数值,不出现X轴数值,切换下页面,X轴数值就能出现。

2023-07-07 10:42:04 15210 65

原创 vue+ svg实现水波纹

【代码】vue+ svg实现水波纹。

2023-04-10 21:15:47 4642 2

原创 关于vue2停止维护,vue3迭代更新的思考:

Vue3是Vue的下一个主要版本,它具有比Vue2更好的性能和更多的功能,包括更快的渲染速度,更好的TypeScript支持,更好的组件化开发体验,更好的Tree-shaking支持等等。Vue 3.0.0 这是 Vue 3 的正式版本,它包含了许多新特性和改进,例如更好的性能、Composition API 和 Fragments。总的来说,Vue3相比Vue2有很多的改进和新增功能,能够带来更好的开发体验和更高的性能,但也需要一定的学习成本和适应期。这种缓存机制可以提高组件的性能,减少不必要的渲染。

2023-04-10 17:17:22 15542 1

原创 CSS 小技巧:纯Css实现hover默认高亮显示

很多人的第一反应是用js来控制样式,如果css能实现的功能,就没必要使用js啦,这里主要涉及css的。2.鼠标移出列表后仍然保留上一次的选中状态;在vue项目中,可以参考一下demo。3.默认列表的第一项为选中状态;1.鼠标滑过触发选中状态;

2023-04-10 16:55:08 11402 1

原创 Three.js入门之-入门前的了解

Three.js中的场景是一个物体的容器,开发者将需要的物体放入场景中。相机的作用就是指向场景,在场景中取一个合适的景,把它拍下来。渲染器的作用就是将相机拍摄下来的图片,放到浏览器中去显示。在定义了场景中的物体,设置好的照相机之后,渲染器就知道如何渲染出二维的结果了。这时候,只需要调用渲染器的渲染函数,就能使其渲染一次了。

2023-04-10 16:48:33 9125

原创 【Minio上传】-大文件分片上传、断点续传✍️

minio上传、断点续传、分片上传前端支持批量上传,并将获取的文件进行获取,然后自动请求预签名接口;后端生成presigned url(预签名url,里面包含上传到AWS S3所需要的一些认证标识信息)以及每个的partSize和currentNumber给到前端,前端通过这个URL,以及大小将文件分片上传到minio服务上,具体切片处理: 循环请求模块的代码,代码上传完成后根据请求的requist的coinfig里面的链接参数中的partNumber来判断当前

2022-12-13 14:57:00 8776 2

原创 vue3+阿里乾坤实现主应用和微应用

qiankun 是一个基于single-spa的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台,在经过一批线上应用的充分检验及打磨后,我们将其微前端内核抽取出来并开源,希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统,同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。目前 qiankun 已在蚂蚁内部服务了超过 2000+ 线上应用,在易用性及完备性上,绝对是值得信赖的。

2022-10-23 20:08:17 13340 17

原创 vue中使用element-ui表格table组件错行出现场景和解决方案

在项目开发中表格错行的问题经常出现,现在整理如下,希望共同学习进步1.element-ui表格table表格内容错行: 1.情况一:表格中有el-tooltip时候,数据过长的时候hover,往上滑动会出现错行,【解决方案:固定高度或者给出:max-height;】;2.情况二:表格中使用css文本的溢出显示省略号没有固定宽度的时候,往上滑动会出现错行,【解决方案:固定宽度度或者给出:max-width;】;3.情况三:表格行的数据发生变化,往上滑动会出现错行【监听doLayout】;

2022-02-09 17:18:31 13219 5

原创 css省略、Css实现单行、多行文本溢出显示省略号 …以及H5常见省略场景

#####场景一:对文案显示字数没有要求:直接css控制省略单行文本的溢出显示省略号//一行省略.one-line{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap}//两行省略.two-line{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //元素显示的文本的行

2022-02-09 16:39:42 9665 2

原创 vue用vue-cli如何创建自己的项目以及手动安装勾选配置

vue利用脚手架创建自己的项目npm uninstall vue-cli -g //全局安装脚手架vue -V //查看自己的vue版本号vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。一、cnpm instal -g @vue/cli (一次全局安装sudo)cnpm install -g @vue/cli -g @vue\n

2020-12-01 22:03:58 10211 1

原创 如何用js实现日期天数、时分秒的倒计时

js实现天数倒计时在用js实现倒计时的时候,可以先算出截止日期和今天之间相差的毫秒数,然后进行相应的比例进行day、 month 、hour、minute、second的计算,便可以准确的计算出相差的时间。倒计时格式为:纯天数倒计时function CountDown(year, month, day, hours) { let now = new Date(); let endDate = new Date(year, month - 1, day, hours);

2020-11-24 21:42:42 15970 2

原创 CSS实现水平、垂直居中的6种方式

1.块级元素和行内元素2.水平居中和垂直居中3行内元素的水平居中 1.table 2.设置line-height 3.text-align:center 4.margin:0 auto; 5.绝对定位 6.flex弹性盒模型 7.calc 8.auto<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

2020-11-22 23:18:53 11283 10

原创 vue-解决弹出蒙层滑动穿透问题

vue-解决弹出蒙层滑动穿透问题遇到的问题】在一个可滑动列表页弹出一个全屏蒙层,蒙层固定,中间一块显示消息框,当用手滑动蒙层空白处时,滑动事件会穿透到底部列表页,导致列表页的滑动。【要实现的目标】1. 滑动蒙层空白处不让滑动事件穿透。2. 当蒙层消息框文字多时,要让文字可上下滑动。 【实现思路】1. vue提供的 @touchmove.prevent 可以用来阻止滑动,但是这个方法会对其内的子div的滑动事件也禁止掉了,这样会导致中间文字无法滑动。如果没有中间滑动需求,用 @touchmov

2020-11-22 20:28:15 8365 2

原创 swiper常用属性

swiper常用属性swiper版本号:3.1.0 direction: 'vertical', //轮播方向,默认是水平滑动horizontal spaceBetween: 5, //在slide之间设置距离(单位px),默认是0 slidesPerView: 1, //设置slider容器能够同时显示的slides数量,默认是1。 loop:true,//loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。 loop模式在与f

2020-11-22 20:15:13 11723 1

原创 安卓和ios移动端实现H5页面进行强制刷新

安卓和ios移动端实现H5页面进行强制刷新定义和用法onpageshow 事件在用户浏览网页时触发。onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。为了查看页面是直接从服务器上载入还是从缓存中读取,你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture,否则

2020-11-21 22:28:52 14003 7

原创 解决vue-awesome-swiper点击事件失效的问题 ===“版本号(vue-awesome-swiper“: “^3.1.0)

解决vue-awesome-swiper点击事件失效的问题 ===“版本号(vue-awesome-swiper”: "^3.1.0)最新做项目使用了 vue-awesome-swiper(3.1.0版本)轮播插件遇到的坑。在使用loop: true模式下: 动态循环数据 ,轮播第一遍是点击事件是正常的,轮播第二遍的时候点击事件就失效了 点击事件不起作用 通过查看api , loop模式下会在slides前后复制若干个 slide 但是这个复制只是针对 dom 元素不会带上之前的绑定事件的 ,

2020-11-21 21:53:32 11778 4

原创 如何CSS-画0.5px的线,解决IOS移动端兼容性问题

**如何CSS-画0.5px的线,解决IOS移动端兼容性问题##**设计师在做设计图的时候都是以iphone6(宽为750物理像素)为基准进行设计的。iphone6的设备像素比(即css像素与物理像素的比例)是2,所以设计师在设计图画了边框为1px的box的时候,相对于css代码来说就是0.5像素。如果用css直接设置边框为0.5px,这种情况下iPhone可以正常显示,但是android下几乎所有的浏览器都会把0.5识别为0,即无边框状态,所以这种方式行不通的。在这里插入代码片<!DOCTY

2020-11-21 20:51:28 8781 4

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除