Flutter Overlay 的使用 —— 自定义 Loading、Toast

2023-06-04
阅读 3 分钟
3.8k
背景:项目中的 Toast 一直试用的是这个包 another_flushbar ,其 Likes 数量还挺多的,但是使用过程中遇到了一些问题,因为这个 Toast 的实现是利用类似 PageRouteBuilder 这样新打开一个路由页面的形式,但是页面中有些组件例如 showDialog、shouBottomSheet 也是使用这种方式,这样就产生了一个问题就是当 Toast 和 di...

flutter - 实现渐变动画矩形边框

2023-03-22
阅读 4 分钟
4k
最近碰到一个需求需要实现一个矩形,矩形边框为渐变色,并且要求渐变色不断滚动向前,如下图所示主要思路参考自这篇文章 另外还有来自 chatgpt 的回答,实现效果如上图所示效果具体实现思路用 CustomPainter 实现一个渐变矩形边框 {代码...} 动画实现借助显式动画 AnimationController 和 AnimationBuilder,具体写法看...
封面图

flutter - 自定义 Drawer 组件(不依赖 Scaffold)

2023-03-19
阅读 6 分钟
3.3k
除了使用上述 Navigator 的方式关闭抽屉,还有下面两种方法参考自这里,这两种方法的原理都是通过获取 ScaffoldState 对象然后调用其内部的 open、close 方法进行操作,下面是代码演示查找父级最近的 Scaffold 对应的 ScaffoldState 对象 {代码...}

React-router V6 拦截 路由跳转

2022-08-11
阅读 4 分钟
10.2k
先说一下背景知识:React-router 是由三个库一起组成的 history、react-router、react-router-dom 我们平时需要用到的是 react-router-dom

antd Tabs 组件简单实现

2022-08-05
阅读 3 分钟
4.9k
之前的工作经历中,一直都是使用 Antd 作为基础组件进行开发,现在我们要自己实现一套管理后台的 UI 组件库,在写到 Tabs 这个组件的时候借鉴了 Antd 的思路,主要用到了 React Context 特性,在此记录下

markdown转pdf简历模板- md2pdf resume

2022-07-30
阅读 1 分钟
1.8k
项目借鉴自 冷熊简历,类似的项目还有很多感觉做的好的有个叫做 木及简历 提供很多默认模板。个人比较喜欢冷熊简历的模板(简洁、大气 已经用了好多年了),但最近发现网站导出 pdf 好像有点问题另外对字体大小,间距也没办法自定义,故借鉴冷熊简历自己开发了一个,与冷熊简历最大的不同是打印 pdf 不由服务端生成而直...

开发一个抽奖大转盘 Lucky-spin

2022-06-20
阅读 2 分钟
3k
最近有一个需求要开发一个抽奖大转盘类的一个页面,本来想着这种东西肯定有现成的,但找了一圈后发现基本上都与我们的设计图有些出入,如果直接使用现成的包估计肯定是验收不通过的
封面图

dumi 打包组件库问题

2022-05-22
阅读 3 分钟
5.2k
dumi介绍dumi 打包组件库文档静态站点以及部署官网已经有详细的讲解,这里不多讲了,下面主要讲一下 father 打包组件库并发布到 npm 中所遇到的问题
封面图

原生 js 实现瀑布流布局、React 版本的瀑布流布局组件

2022-04-11
阅读 2 分钟
4.8k
演示图 演示页面React 版本 codesandbox 演示页面核心思路借鉴自 [链接]基本实现原理参见: 总结实现瀑布流的三种方式使用方式直接cdn引入 {代码...} React 版本 {代码...} 简单粗暴的办法直接拷贝src/index.ts目录下的代码到你的项目中使用,vue、react项目均可,或是直接 esmodule 导入 import Waterfall from "wa...

Storybook使用过程遇到的一些问题

2022-03-18
阅读 2 分钟
3.1k
由于我是接手的别人的项目,这个项目的 storybook 均已初始化完毕,但有一个问题是 docs 菜单不显示内容,这就带来了一个问题:就是我在 storybook 找到了我需要的组件但是我却无法直接复制只能去源码找到相应代码然后拷贝下来其过程十分痛苦繁琐

html生成邮件签名

2022-03-08
阅读 3 分钟
4.3k
最开始由于不太理解邮箱签名是个什么东西,怎么生成,以为是直接复制出一段富文本呢,所以一开始使用下面的代码做的,倒是也能实现效果,而且可以直接粘贴进富文本的输入框,比如:写 邮件 的输入框,注意如果以html形式copy,不能将copy的内容粘贴微信等聊天工具的输入框,text模式可以随便粘贴, 代码如下: {代码...}...

用Chrome插件改进开发体验

2021-11-28
阅读 4 分钟
3k
由于公司的部分老项目(数量还挺多)前端是用hybird方式和app混合开发,前端的登录态是靠app打开时在url拼接一个token,开发环境调试时候用charles抓包,将页面url取出来(url里面带有token),这样就能开发时在本地模拟用户登录状态
封面图

npm 相关知识杂谈

2021-08-15
阅读 1 分钟
1.2k
npm 相关知识记录如何安装npm?安装node就会自动安装npm(建议使用nvm来安装)建议用yarn来管理npm依赖(速度更快、依赖扁平结构),还有最新的pnpm值得研究用nrm管理registry如果公司有npm私服并且有对应的scope,可以设置scope对来自同一命名空间下的包同意指定安装源避免来回切换源的繁琐,并且在发布该scope下的npm...

React ssr框架Next.js 的生产实践

2021-03-21
阅读 3 分钟
4.6k
默认初始化的框架样式支持sass,组件级别的[name].module.css,但默认不支持less,官方提供了配置less的方法 {代码...} 重新启动后会报 Error: Cannot find module 'webpack' 于是就安装webpack但默认安装的是webpack@5.x,按照这个 issue,要替换成 webpack@4.x 才可以

Browserslist: caniuse-lite is outdated

2021-01-29
阅读 1 分钟
9.1k
Browserslist: caniuse-lite is outdated. Please run the following command: yarn upgrade

h5直播拉流页面调研

2020-11-06
阅读 8 分钟
10.2k
移动端:[链接]pc端:hls.js 支持m3u8视频编码格式视频文件格式(容器格式)视频编解码器(视频编码格式)视频一开始由两个端采集,视频输入口、音频输入口。采集的数据会分别进行相关处理,简而言之就是:将视频/音频流通过一定的手段转换为比特流并且压缩,最终,这里将比特流以一定顺序放到一个盒子里进行存放,从而...

直播弹幕滚动列表效果实现

2020-05-13
阅读 5 分钟
7.2k
效果描述:页面上部为直播视频播放器,下半部分是弹幕列表,ui效果类似b站app分享出去的h5直播间,要实现的效果,当弹幕滚动到最底部的时候,新来的的弹幕会自动往上顶,如果向下滑动去看历史弹幕列表新来的弹幕则停止往上顶,然后左下角会出现新消息提示,当点击新消息提示则滚动到最底端新消息提示消失,或者手动滚动...

开发一个 React Loading 组件

2020-03-07
阅读 4 分钟
7.5k
一直都是用的第三方库的loading组件(ant-design/antd-mobil),最近一个项目需要用到loading,自己开发了下,总结如下:

JSBridge 实现原理及开发实践

2020-03-04
阅读 6 分钟
10.1k
JavaScript是运行在一个单独的 JS Context中(例如: webview的webkit引擎,JSCore) 本位主要总结下 JSBridge 前端实现原理,来自工作中的总结,安卓/ios代码仅为示意JSBridge 是广为流行的Hybrid 开发中JS和Native一种通信方式,简单的说,JSBridge就是定义Native和JS的通信,Native只通过一个固定的桥对象调用JS,JS...
封面图

开发一个 react & typescript 的ui组件

2020-02-16
阅读 10 分钟
3.9k
代码仓库地址 npm 注册登录 前置条件: 切到对应的npm源 npm logout npm login 依次输入账号、密码、邮箱 npm publish (会提示去npm官网验证邮箱地址) npm 发布时可能遇到的问题 源出错 包名重复 每次发布前要修改package.json的版本号,必须要大于上一次的版本号 npm link 本地调试:为调试带来的频繁发包,可以使用 n...

😀一个原生js弹幕

2020-02-10
阅读 2 分钟
4.6k
BulletJs😀一个原生js弹幕库,基于CSS3 Animation版本已更新文档 [链接]演示 [链接]项目地址本项目灵感来源于 rc-bullets演示图2020-08-13更新采用rollup打包并发布到npm,rollup打包教程去除靠IntersectionObserver来对弹道进行调度,采用新的弹道选择算法,增加防重叠检测支持同速/不同速弹幕默认情况下直接丢弃排不上...

react和webpack4.x 使用 loadable 做 code-split 时 抽离css 遇到的问题

2019-12-28
阅读 3 分钟
2.4k
最近在开发中遇到了一个问题,我在react 项目中用 react-loadable和import() 做根据路由 code-split 时的遇到的一个问题,用 extract-text-webpack-plugin 做css 抽离时,导致css有点问题

commonjs & ES module & babel转码 & webpack转码

2019-08-18
阅读 7 分钟
8.2k
js模块发展历程-javaScript模块七日谈前端模块化开发那点历史 #588现代ES模块也需要各种转码工具才可以在浏览器里正常运行,下面是转码现代ES模块需要了解到的知识点 commonjs & ES module & babel转码 & webpack转码

ES5/ES6 的继承

2019-07-23
阅读 5 分钟
4.5k
每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,实例有一个指向原型对象的指针 构造函数 --(prototype)--> 原型对象 --(constructor)--> 构造函数

css 预处理器 - sass/scss、less、stylus

2019-07-09
阅读 4 分钟
8.9k
css 预处理工具,可以将其对应的DSL(领域特定语言)编译为 css 基本介绍 sass/scss SASS 2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架 Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,sass 不兼容 css 代码 Sass3 就变成了Scss(sassy css) 与原来的语法兼容,只...

通讯录式的吸顶效果

2019-01-23
阅读 20 分钟
5.4k
吸顶的那个 bar 其实是一个定位在屏幕最上的一个元素,把下面 各个区块的高度累加放到一个数组里 [0, 740, 990, 1310, ...]

阿里云服务器部署 nodejs + mongodb + nginx 反向代理 + https配置 ssl证书

2018-12-02
阅读 10 分钟
6.4k
ssh root@39...* 输入密码(购买时的密码) 如果出现这个问题的解决方案:root@39.106.220*.*: Permission denied (publickey,gssapi-keyex,gssapi-with-mic)

input 弹起数字键盘的那些坑

2018-03-22
阅读 3 分钟
12k
前言:最近有个需求要将全平台的交易密码由原来的 6-16位 复杂密码改为6位纯数字交易密码,涉及到非常多的业务场景,但修改起来也无非两种:设置交易密码,使用交易密码

zsh 命令行工具(安装使用),错误异常处理,vi 基本使用步骤

2017-10-11
阅读 2 分钟
6k
zsh 命令行工具(安装使用),错误异常处理,vi 基本使用步骤 简介:等我搞熟了,再来补全原理,作用,目前仅仅只是会使用,并不知其他 安装 下载一个 .oh-my-zsh 配置(推荐有) git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh 创建新配置 cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshr...

vue 模仿今日头条demo

2017-08-20
阅读 9 分钟
17.2k
vue 头条 demo 写在前面 总结一下写 demo 过程中 遇到的一些问题,方便自己的学习总结!如有错误,还请指正! 一直想学习使用 vue ,并准备以后在实际项目使用,之前跟着慕课网 黄轶 老师 敲了一下 饿了么商品购买页的demoele效果预览 该 demo 借鉴自 hcy1996-github 这个项目,但内部内容,布局风格,完全不同,只为共...