zyronon-CSDN博客

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

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

2024-05-30 14:44:09 672

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

2024-05-15 10:58:18 916

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

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

2024-04-23 10:09:29 1090

原创 React 中的 useRef 与 useState

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

2024-04-16 11:57:30 640

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

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

2024-04-15 10:36:00 168

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

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

2024-04-15 10:09:15 848

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

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

2024-04-07 10:49:10 405

原创用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 295

原创 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 318

原创利用 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 225

weixin_59837683的博客