自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(13)
  • 收藏
  • 关注

原创 使用rem、动态vh自适应移动端

通过使用rem和vh/vw我们就可以适配大多数常见设备啦,如果有特殊需求还可以使用媒体查询来单独适配~模仿抖音。

2024-05-30 14:44:09 670

原创 实现抖音 “视频无限滑动“效果

页面中同时存在多少个SlideItem,默认为5。//页面中同时存在多少个SlideItem},设置这个值可以让外部组件使用时传入,毕竟每个人的需求不同,有的要求同时存在10条,有的要求同时存在5条即可。不过同时存在的数量越大,使用体验就越好,即使用户快速滑动,我们依然有时间处理。如果只同时存在5条,用户只需要快速滑动两次就到底了(因为屏幕中显示第3条,刚开始除外),我们可能来不及添加新的视频到最后render:渲染函数,SlideItem内显示什么由render返回值决定render: {

2024-05-15 10:58:18 911

原创 不到200行用Vue实现类似Swiper.js的轮播组件

大家在开发过程中,或多或少都会用到轮播图之类的组件,PC和Mobile上使用Swiper.js,小程序上使用swiper组件等。本文将详细讲解如何用Vue一步步实现的类似Swiper.js的功能,无任何第三方依赖,干货满满。A核心代码加上注释一共217行,我们实现了一个可以在PC和Mobile上通用,并且可以无限嵌套的轮播组件。

2024-04-23 10:09:29 1082

原创 React 中的 useRef 与 useState

React 是一个流行的 JavaScript 库,用于构建用户界面。它提供了几个钩子,使开发人员能够管理状态并执行副作用。React 中两个常用的钩子是useRef和useState。虽然它们乍一看似乎很相似,但它们具有不同的目的并且具有不同的用例。在本文中,我们将深入探讨useRef和useState,比较它们的功能并提供示例来说明它们的用法。

2024-04-16 11:57:30 638

原创 umi4 页面组件导出的是匿名函数会导致hmr失效

页面组件导出的是上面的这种匿名函数会导致hmr失效,任何小修改都会导致page reload ,应该是hot replace。如果导出的是上面这种具名函数,hmr则是正常的。

2024-04-15 10:36:00 168

原创 Js实现任意位置缩放图片,深入理解背后原理

本文将用一个简单的例子详细讲解如何用原生JS一步步实现完整的任意位置缩放图片功能,无任何第三方依赖,指针事件进行多端统一的事件监听,干货满满。

2024-04-15 10:09:15 839

原创 通过开源项目申请到JetBrains的License啦

有开源项目的兄弟可以申请试试,不需要有多少star,我申请时那个项目都没有star一样也通过了,猜测主要是看活跃度和项目时间。

2024-04-07 10:49:10 403

原创 用Vue全家桶纯手工搓了一个开源版「抖音」

2018年刚入行前端时,公司使用的还是Angular。Angular什么都好,就是写代码时的体验老糟心了,改一个地方,按下保存之后,要等好几秒刷新后才能看到效果,Webstorm无比好用的自动保存,对我来说反而像是一个负担。然而2024年了,Angular已经更新了17版本,还是没有解决这个问题,热替换依然那么的糟糕在网上冲浪时,发现了刚开始火起来的Vue,大家都在说简单好用上手快,于是抱着试一试的心态照着Vue官网的教程开始学习,并创建了这个项目。

2024-04-07 10:44:09 967

原创 前端跨域解决方案整理

什么是同源策略如果两个 URL 的协议、域名和端口都相同,我们就称这两个 URL 同源。浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若想要相互访问资源或者操作 DOM,那么会有一套基础的安全策略的制约,我们把这称为同源策略。具体来讲,同源策略主要表现在 DOM、Web 数据和网络这三个层面。第一个,DOM 层面。同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。第二个,数据层面。同源策略限制了不同源的站点读取当前站

2021-06-30 16:32:36 127 2

原创 mini-promise 实现原理讲解

本文主要会按照 Promises/A+规范 来一步步实现一个完整的 Promise,相关代码请查阅https://github.com/mcuking/blog/tree/master/mini-promise。先写一段 Promise 的应用代码:new Promise((resolve, reject) => { setTimeout(resolve('hello world'), 1000);}).then((msg) => console.log(msg), (err.

2021-06-30 16:28:20 95

原创 vue中 利用混入定义全局变量、函数、筛选器

说一种没人发的,利用混入mixins来实现全局变量和函数。mixins里面的方法、变量、筛选器会和组件里面的方法、变量、筛选器合并。这种方法优点是ide会有方法、变量、筛选器提示。一、main.js文件import Vue from 'vue' import App from './App' import router from './router' import store from './store'import mixin from './utils/mixin' Vue.pr

2021-06-30 16:21:31 294

原创 Canvas绘制动态圆环进度条

最终效果##一、定义初始变量let radius = 140 //外环半径let thickness = 20 //圆环厚度let innerRadius = radius - thickness //内环半径let startAngle = -90 //开始角度let endAngle = 180 //结束角度let x = 0 //圆心x坐标let y = 0 //圆心y坐标let canvas = document.getElementById('tutorial');.

2021-06-30 16:20:06 305

原创 利用 Canvas 绘画一个未闭合的带进度条的圆环

最终效果图一、定义变量定义半径,定义圆环厚度,定义圆心位置、定义默认填充颜色let radius = 75let thickness= 10let innerRadius = radius - thicknesslet x = 75let y = 75var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');ctx.fillStyle = "#f2d7d7";.

2021-06-30 16:19:03 221

空空如也

空空如也

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

TA关注的人

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