- 博客(23)
- 收藏
- 关注
RSS订阅原创 解决 Unable to load ‘@webpack-cli/serve‘ command
Unable to load '@webpack-cli/serve' command
2022-07-10 15:55:04
675
1
原创 scroll-view 滑动多次触发
uniapp 写 微信小程序时发现 scroll-view 的@scrolltolower 滚动到底部事件 滑动会触发多次即使定义了 flag=false 开关锁 请求为true 滑动为fasle 也没有解决问题解决 :添加 :throttle="false" 关闭节流解决 滑动多次触发 和lower-threshold=0 触底不触发的BUG(官方文档并没有写这个属性 , 经过测试 亲测有效)<scroll-view scroll-y="...
2021-07-09 16:36:53
1241
原创 uniapp 表单校验
DCloud 插件市场 有表单校验插件 , 也可以自己封装一个需要 在 vue 页面 定义一个表单校验规则rules格式 :// 表单校验规则rules: { // name 字段 userName: { //正则 校验 rule: /\S/, // 不为空 提示 name值 name: '用户名', // 正则匹配成功 提示值 msg: '用户名不为空' }}vald..
2021-07-08 13:38:45
3615
原创 小程序 图片转pase64 格式
使用uni.chooseImage 从本地选择图片做多图上传的时候 , 图片需要转换 base64 格式传给后端使用 wx.FileSystemManager.readFile(Object object)读取本地文件内容 并转换为 base64格式返回代码 :wx.getFileSystemManager.readFile({ filePath: ``, // 文件路径 encoding: 'base64', success: res => { console...
2021-07-08 11:26:42
179
原创 当前系统代理不是安全代理，是否信任
打开小程序 出现当前系统代理不是安全代理，是否信任? 的提示解决方案 :Ctrl + Shift + Esc : 打开任务管理器找到spoolsv.exe 并结束进程再次打开小程序 解决问题
2021-07-08 10:36:56
184
原创 TypeError: Cannot read property ‘matched‘ of undefined
TypeError: Cannot read property 'matched' of undefined解决办法 : main.js 中路由实例与vue实例是否关联在一起检查 router 大小写是否拼错
2021-05-20 00:17:30
345
原创 svg 跟随鼠标滚轮移动
一、先让svg自己沿坐标移动1画一条svg路径<!-- d : 是path的路径参数 fill : 是svg文字 线 的填充色 三次贝塞尔曲线 :cubic-bezier (x1,y1,x2,y2) 由起始点 , 终止点 , 两个中间点组成--><path d="M0 0,C800 1000,0 2000.32,800 2800" fill="none" class="line" id='line1' />2定义动画:让svg路径的长...
2021-02-26 11:37:06
1025
3
原创 webpack-dev-server 报错 Error: Cannot find module ‘webpack/bin/config-yargs‘
Error: Cannot find module 'webpack/bin/config-yargs' 报错 解决> [email protected] dev G:\000Code\10\11\demo70> webpack-dev-server --port 3000internal/modules/cjs/loader.js:1033 throw err; ^Error: Cannot find module 'webpack/bin/config-yargs'Requ.
2020-11-19 11:01:57
2062
原创 长页面滚动动画(优化)
之前写的长页面滚屏动画回过头看发现有很多局限性比如:1.每次动画后都要加上opacity:1,元素过多时候代码冗余2.如果动画元素过多,js调用aniCom()方法时候,传入值过多,容易出错3.如果动画元素是类名有多个,调用aniCom()时候不起作用进行优化1:使用less封装 动画函数// 封装动画 简化每次动画操作.fill-mode { opacity: 0; animation-fill-mode: forwa...
2020-07-31 16:52:32
275
原创 css伪元素层级在父元素之下
目标:把心和点状图放在盒子下面,位置不变写页面时，有些装饰性元素在内容盒子下面，通常是给内容盒子再包裹一层父盒子，把层级小于内容盒子的装饰元素定位上去这样写很麻烦,结构上还多了一层的盒子,不利于代码维护解决 : 可以使用z轴的3d转换更换伪元素(子元素)的层级 .father { /* 让子元素 呈现3D转换 */ transform-style: preserve-3d; } .son { /* 使用Z轴进行3D 转换 */ trans..
2020-07-22 15:27:19
2462
原创 less封装函数动画
给若干 li 添加动画,问题1:怎么让每次写动画代码量减少问题2:想给多个li添加层次动画,但li过多,每个li添加 nth-child() , 代码冗余, 怎么减少代码量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
2020-07-21 10:41:55
422
原创 css 鼠标hover 水流上升动画
实现原理1 . 子盒子撑满父盒子 , 设置水流颜色2 . 子盒子的 伪元素after 宽高 1:1 , 设置边框圆角 , 颜色和文档背景色相同3 . 带边框的圆角 , rotate(360deg) , 旋转360度 , 模拟水流动画4 . 鼠标hover , 子盒子的伪元素加旋转动画 , 在加上 translateY()向上平移动画5 . 给父盒子添加 overflow: hidden<!DOCTYPE html><html lang="en"><h...
2020-06-15 14:13:11
447
原创 css hover水滴涟漪效果
实现逻辑1.给盒子添加遮罩层,初始大小为0,hover效果放大2.判断鼠标进入位置,上下左右四个方向3.拿到鼠标在盒子内的X/Y坐标位置,e.pageY-$(this).offset().top4.鼠标进入动画:把鼠标的X/Y轴坐标,添加给遮罩层,作为定位的left和top,并添加放大动画5.鼠标移除动画:判断出去的位置,给遮罩层添加left和top,并添加缩小动画<!DOCTYPE html...
2020-06-15 10:29:48
807
原创 js跟随鼠标hover效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; p.
2020-05-29 11:50:59
550
原创 css隐藏滚动条
.box { display: flex; overflow-x: auto; &::-webkit-scrollbar { display: none; }}给滚动的盒子加上-webkit-scrollbar
2020-05-07 09:24:36
188
原创 移动rem项目在pc端字体显示问题
在移动端使用rem写好的项目，在pc端显示，只要使用rem字体的文字，图片都会出现问题正常的移动端 ????：字体变大的pc端 ????：因为rem是根据 根字体大小 (html的字体大小) 来设置的，所以到pc端和移动端 html的font-size大小不同，导致展示有问题解决办法 ：// 最大的容器 设置了 max-wi...
2019-11-27 17:18:18
453
原创 padding-top实现列表图片自适应
处理列表中响应式图片的时候，宽度可以设置百分比进行自适应，但是高度没办法控制 ，如果图片宽高不一致，宽度设置一样，高度会参差不齐这时就可以使用padding来控制图片的高度，让列表中的图片强制设置同一高度1 : 图片使用盒子包裹，案例为 .img-box2 : img-box的高度用padding-top/padding-bottom 撑开 padding-t...
2019-11-27 16:53:00
751
原创 长页面滚屏动画
H5长页面 , 向上滑动 , 页面滚动到元素位置 , 元素显示并做动画显示 , 向下滑动 , 元素不在屏幕显示 , 元素取消动画now类并隐藏 , 方便再次滑动添加动画Demo使用了 使用animate.css https://www.cnblogs.com/xiaohuochai/p/7372665.html核心js代码: ...
2019-11-27 16:32:39
898
原创 异形卡片轮播
使用swiper轮播插件,遇到三个问题1 . 自带按钮,只能出现在轮播区域内 , 因为轮播盒子swiper-container设置了overflow:hidden2 . 同屏显示多个轮播页 , 在宽度不同的的情况下,会出现收尾轮播页溢出被覆盖的情况3 . (如果想留出空隙 , 给轮播加背景) , 无法给轮播盒子swiper-container设置padding , ...
2019-08-21 16:15:15
395
原创 滚动穿透
什么是滚动穿透：弹出层滚动时，弹出层下的body跟着滚动解决方法:方法一 :position:fixed 1.打开模态框时，给body加上类名preventScroll； - 2.关闭模态框时，移除body上的preventScroll类名。 问题 ! 当关闭弹出框 ,body的滚动位置会丢失还原为0，也就是body 的ScrollTop 属性值会变为 ...
2019-08-12 14:05:37
384
原创 tap栏切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
2019-07-08 17:36:49
949
原创 jQuery 返回顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
2019-07-08 15:22:45
62
原创 IScroll 和 解决手机端点击问题
使用iScroll来完成简单的区域滚动Demo注意点 ： 1.要有父容器嵌套子容器，且父容器只能包含一个子容器 2.父容器（#wrapper）设置相对定位 + 溢出隐藏 3.子容器 (ul) 设置绝对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...
2019-06-18 15:07:36
223
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人