- 博客(47)
- 收藏
- 关注
RSS订阅原创 前端关于display显隐和transition动画过渡的爱恨情仇
关于平时接触到的菜单栏，或者是手风琴功能，都涉及到展开收起的显示和隐藏，且隐藏后不占位。直接display显的生硬，想加transition动画过渡，却和display两个老死不相往来。当然可以考虑第三方组件库现成组件，但是也不是什么情况都适用于把一个组件库弄进来。然后就有了以下代码，简单做了一个菜单的展示，实现了动画的过渡。styles.module.scss文件。
2023-12-23 13:16:50
566
原创 关于git项目修改文件大小写识别的问题
git 文件大小写 报错 differs from already included file name only in casing
2022-04-08 10:01:24
1769
原创 react项目开发redux ,redux-saga 的使用笔记
项目中一直使用umi搭建，也包涵saga，只不过开箱即用，里面一些门道自己摸索了一下，单独把saga 拎出来 写了一个简单的案例 用来记录 redux-saga 的使用基本依赖自己安装搞定：redux，redux-saga，redux-actions…大概目录结构如下按文件夹来分析先是action 存放各种action 可以根据项目大小页面多少 是否分类文件// -------- actions/todo.js ------------// 几个简单的actionexport const
2021-10-27 13:20:14
213
原创 websql 和 indexedDB本地存储
websq // 创建|打开 var db = openDatabase("person", 1, "test", 0); // '数据库名 版本号 描述 存储容量限制' // 创建表 db.transaction((tx) => { tx.executeSql("create table if not exists student (id unique,name)"); }); // 新增数据 db.transaction((tx) => { tx.executeSq
2021-10-18 10:19:21
200
原创 yarn命令及.yarnrc配置文件使用
.yarnrc设置淘宝镜像yarn config set registry https://registry.npm.taobao.org // 设置淘宝镜像项目根(src同级)目录添加.yarnrc文件为项目设置镜像源及包的路径registry "https://registry.npm.taobao.org"sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"phantomjs_cdnurl "http://cn
2021-09-02 15:26:26
10043
原创 canvas绘制图片二维码+文字+背景 下载到本地
闲来无事，以下自己写了个小demo，丰富canvas下载到本地的图片内容，可以添加照片，描述文字，背景样式等…之前写过下载二维码的需求，需求简单，只要能下载就行，但是下载到本地就一个纯二维码的小图片，感觉不怎么美观。
2021-08-25 14:08:37
1526
5
原创 web h5调用微信分享功能
微信分享微信网页开发 /JS-SDK说明文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html// 根目录引用微信js文件 <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>// imgUrl:缩略图 title:分享标题 desc:描述文字 function weChatShar
2021-08-09 11:35:41
1756
2
原创 js代码实现复制功能
前端js代码简单实现文本内容复制应用于类似复制链接打开场景等。。。// 准备一个文本类标签 textarea 、input ...<input id="text" value="要复制的内容！！！" /><button id="btn">copy</button>btn.onclick = () => { text.select(); // 选中文本标签的内容 document.execCommand("Copy"); // 执行copy复制
2021-08-06 09:51:36
712
原创 web移动端拦截页面后退操作
向路由栈添加两条标记，监听如果回退到上一个标记，就执行router.go(1)，回到当前页面// 页面挂载的时候执行const interceptInit = () => { // 此处添加500毫秒延迟，目的是等待历史记录变化之后再添加空地址，使空地址能准确添加到栈顶，防止出错 setTimeout(() => { if (!(window.history.state && window.history.state.target === 'Final').
2021-07-30 16:17:48
623
原创 前端实现生成二维码展示与下载 react
qrcode.react 插件地址：https://www.npmjs.com/package/qrcode.react使用代码：import QRCode from "qrcode.react";const qrEl = document.getElementById("qrEl");const image = new Image();image.src = qrEl.toDataURL("image/png");const url = image.src; // 这个url 赋值给
2021-06-25 14:17:53
416
原创 react页面实现进出场动画
react-animated-router 依赖文档：https://www.npmjs.com/package/react-animated-router直接路由组件 Switch替换为 AnimatedRouter标红报错了开发中(ts)遇到问题 替换后一直报错 说缺少必要属性 看了源码 加上以下几个属性后没报错（enter ，exit， appear）<AnimatedRouter enter exit appear> ... </AnimatedRouter>
2021-06-25 13:34:25
702
原创 react前端html字符串转成html dom节点
dangerouslySetInnerHTML属性用在h5标签上，然后赋值一个对象{__html: ‘插入的字符串’}，就会在该节点子元素的位置生成你插入的dom节点// react 写法<div dangerouslySetInnerHTML={{ __html: '这里放包涵html标签的dom字符串', }}></div>...
2021-03-19 09:43:14
1714
原创 前端处理ios 安卓移动端 页面出现无法滑动问题
或是用手划到最顶端和最底端容易出现，又或是其他操作导致，页面卡住 无法滑动，解决如下给需要滑动的盒子添加监听事件，要是滑动到最顶部 或者最顶部 就阻止默认时间出发页面滑动// 处理页面卡顿无法滑动 const layerBox = this.lv; var targetY = null; layerBox.addEventListener('touchstart', function(e) { //clientY-客户区坐标Y 、pageY-页面坐标Y
2021-03-12 15:26:36
2018
原创 css强制显示滚动条
多运用于横向需要滚动的情况，如果不显示滚动条 给人感觉像是页面内容加载不全<div className={style.tableWrap}> <div>滚动的内容</div></div>.tableWrap { overflow-y: hidden; overflow-x: scroll; padding-bottom: 0.05rem;}.tableWrap::-webkit-scrollbar { -webkit-appeara
2021-02-05 13:59:08
2491
原创 MediaDevices.getUserMedia` undefined 的问题
MediaDevices.getUserMedia undefined
2021-01-14 09:49:43
1380
原创 antd mobile长列表下拉刷新
开发中写长列表下拉刷新，因为官方案例太啰里八嗦了，很多杂的东西，对第一次接触的人不太友好，自己摸索了挺长时间，记录一下const data = [ { des: '文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题1', }, { des: '文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题2', }, { des: '文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题3', }, // { // de
2020-11-26 17:28:37
887
原创 开发中遇到的问题ing...
多行文本，react环境配置，base64，空气刘海，node-sass，响应转态码，process is not defined
2020-11-26 17:12:02
395
原创 【已解决】记录react页面跳转是否要回到指定浏览位置解决方案
基于react的umi项目开发中遇到页面之间跳转，有的页面跳转过来需要回到顶部，有的页面需要滚动到指定的位置，常见一些列表页面跳转详情页面，再跳转回来找了很多资料用了很多方法，都没实现，后面摸索出这个方法解决方案记录：先是回到顶部解决方案:// 在layout组件绑定了节点，监听地址path变化 可以实现跳转后回到顶部const layoutWrapper = useRef() useEffect(()=>{ layoutWrapper.current.scrollTop =
2020-11-23 17:01:11
1837
原创 （已解决）better-scroll区域可以左右滚动 但手指触摸页面不能上下滑动
在页面写了一个左右滑动功能，左右滑动没问题，但是发现在移动端，触摸该区域上下滑动页面就出问题了，页面上下滑不动了。。。。better-scroll区域可以左右滚动（我做的是横向滚动）但手指触摸不能上下滑动页面，应该怎么解决呢？配置项加入 eventPassthrough: ‘vertical’ 解决了。new BScroll(this.refs.activelistWrapper, { scrollX: true, eventPassthrough: 'vertical
2020-11-20 15:52:44
1513
原创 taro3.0框架使用taro-ui报错问题
在 taro 项目的 config/index.js 中新增如下配置项：h5: { esnextModules: ['taro-ui']}报错信息� Failed to compile../node_modules/taro-ui/dist/h5/components/accordion/index.jsModule not found: Can't resolve 'nervjs' in 'F:\test\taroApp\node_modules\taro-ui\dist\h5\c
2020-11-08 21:33:34
3476
1
原创 移动端适配rem布局
// 移动端适配方案：以750px设计稿为基准，1rem = 100px。eg：font-size: 0.32rem;(字体大小为32px)。(function (document, window) { let designWidth = 750 // 设计稿宽度，需根据设计稿进行调整。 document.documentElement.style.fontSize = document.documentElement.clientWidth / designWidth * 100 + "px"
2020-10-29 16:38:12
141
原创 socket简单的实现
socket应用场景会员到期提醒站内信中奖信息数据可视化需要实时更新的场景 …实现socketsocket.io 麻烦，兼容性较好websocket 使用方便，h5新增，低版本浏览器兼容性差1. socket.ionode环境服务端代码安装：npm install socket.ioconst express = require('express')const app = express()// 把socket服务和node服务结合const server =
2020-10-26 20:44:19
138
原创 git命令大全及如何直接访问github上的项目
如何直接访问github上的项目打开项目的地址，在地址前加上 htmlpreview.github.io/?git命令大全
2020-10-23 21:27:09
1228
原创 react的mobx使用
MobX 为现有的数据结构(如对象，数组和类实例)添加了可观察的功能。 通过使用 @observable 装饰器(ES.Next)来给你的类属性添加注解就可以简单地完成这一切。1. 定义一个mobx store// ------------------TestStore.js-------------------// 引入mobx相关模块import { makeObservable, observable, action, makeAutoObservable
2020-10-22 22:54:52
1137
原创 webpack常规配置
webpackwebpack配置中文https://www.webpackjs.com/concepts/以下为自己动手搭建开发项目(react)相关基础配置环境，非脚手架搭建环境基础配置 => 能保证项目正常跑起来，没什么大问题1.webpack.config.js主配置文件，未更改名默认为webpack.config.js文件，存放项目根目录也可自定义配置文件名称，以下改名为react.config.js为例// react.config.js 文件配置// CommonJS模
2020-10-22 21:27:34
263
原创 axios请求配置组件封装
axios数据请求配置1.创建axios.js配置文件axios配置一般会复杂很多，此处简单为例// 本地urlconst baseURL = 'http://localhost:8080'const version = '/api/v1'// 创建一个axios实例const instance = axios.create({ baseURL: baseURL + version, timeout: 7000, headers: {}})// 封装请求拦截
2020-10-22 20:06:21
174
转载 HTTP协议超级详解
目录HTTP协议简介HTTP协议概述HTTP工作原理HTTP请求方法HTTP状态码URLHTTP请求格式(请求协议)HTTP响应格式（响应协议）HTTP协议简介 超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。 &nb
2020-10-10 15:45:35
115
原创 防抖和节流
防抖和节流1.什么是防抖和节流？2.防抖和节流的共同点和区别？3.实例1.防抖2.节流1.什么是防抖和节流？防抖：从字面意思理解就是防止抖动，众所周知，在抖动的情况下容易发生高频触发。为了避免这种情况，防抖的核心就是<延迟执行>，当间隔时间大于规定时间，才会触发执行方法。适用场景：实时搜索、拖拽。节流：字面翻译–>节省流量。节流是指若在规定的间隔时间内仍频繁重复操作，请求方法并不会重新发送，直到中间间隔时间大于规定的间隔时间，才会重新触发请求。适用场景：抢购疯狂点击。2.防抖和
2020-10-06 14:21:48
317
1
原创 nodejs之MongoDB 非关系型数据库
文章目录一、MongoDB是什么？二、使用1. 下载安装2. 指令3. mongoose模块一、MongoDB是什么？MongoDB 是一种文档数据库,它所具备的可扩展性和灵活性可以满足您对查询和索引的需求二、使用1. 下载安装1.下载安装包：https://www.mongodb.com/download-center/community2.安装流程：next勾选同意 -> next选择complete去掉Install MongoDB as a Service -> n
2020-09-26 13:11:03
2638
原创 nodejs之express框架，路由与中间件
文章目录一、express框架1. express基本使用2. api接口3.get接口4.post接口二. router路由三. middleware中间件1. 内置中间件 (static)2. 自定义中间件 (全局和局部)3. 第三方中间件 (body-parser)一、express框架express 基于 Node.js 平台，快速、开放、极简的 Web 开发框架koa 基于 Node.js 平台的下一代 web 开发框架(Express的原班人马打造)1. express基本使用安
2020-09-26 11:59:09
202
原创 nodejs的认识与基础模块操作
文章目录一、nodejs是什么？二、使用1.安装三、运行程序js运行环境运行nodejs程序nodemonhttp模块fs 模块url 模块querystring 模块path 模块第三方模块nodemailer 发送邮件模块cheerio 模块全局变量提示：以下是本篇文章正文内容，下面案例可供参考一、nodejs是什么？node.js是基于Chrome v8引擎的javascript runtimecommonjs规范node应用于各种包各种模块组成，采用的commonjs模块规范co
2020-09-26 10:57:08
305
原创 HTTP缓存机制，浏览器缓存，http1.1、http2、http3
http1.HTTP/1.x 有连接无法复用、队头阻塞、协议开销大和安全因素等多个缺陷2. HTTP/2 通过多路复用、二进制流、Header 压缩等等技术，极大地提高了性能，但是还是存在着问题的3. QUIC 基于 UDP 实现，是 HTTP/3 中的底层支撑协议，该协议基于 UDP，又取了 TCP 中的精华，实现了即快又可靠的协议浏览器缓存策略通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP 请求头 来实现的。1. 强缓存强缓存不会向服务器发送请
2020-09-22 12:30:32
742
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人