问题记录
记录工作中以及学习中遇到的小问题,以及一些bug修复的笔记
我叫陈小皮。
前端菜鸟,请多指教
展开
-
ChunkLoadError: Loading chunk {n} failed.
偶现路由切换,控制台报错 ChunkLoadError: Loading chunk {n} failed.可能是远程资源更新,浏览器缓存,出现静态资源不一致等原因造成的。原创 2023-05-31 10:40:56 · 3423 阅读 · 1 评论 -
判断手机端和PC端的方法
function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var flag = true; f转载 2017-10-13 11:30:16 · 1417 阅读 · 2 评论 -
border-radius 50% 安卓手机不是圆
一般出现这种情况,多半是因为使用了rem而不是px所以把border-radius:50%的元素宽高改成px形式,即可解决原创 2019-02-21 14:32:56 · 1926 阅读 · 1 评论 -
F2 柱状图 使用 scrollBar 不可滑动
1. 检查语法是否有问题 (https://f2.antv.vision/en/docs/api/chart/scroll-bar)const F2 = require('@antv/f2/lib/index');const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');// 注册插件 ScrollBarF2.Chart.plugins.register(ScrollBar); // 这里进行全局注册,也可以给 chart 的实例注册原创 2021-10-11 16:53:15 · 865 阅读 · 0 评论 -
vant 日历插件,部分全面屏手机显示不出来
找了很多资料没有特别好的办法,只有模拟滚动,代码如下:所做需求:日期作为筛选项,多次切换的时候会出现空白的情况<!--简略版代码--><van-dropdown-item title="昨日统计" ref="date" @open="openCalendar"> <template #default> <div class="calendar-wrap"> <van-calendar原创 2021-04-19 10:47:49 · 1912 阅读 · 0 评论 -
解决Iphonex 底部按钮fixed,bottom:0 底部留白问题
注意:配合viewport-fit=“cover”使用<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1, user-scalable=0,viewport-fit=cover">解决方案:<div class="wrapper...原创 2019-08-02 18:55:52 · 6656 阅读 · 3 评论 -
一个页面仅保持一个播放中的audio
// 获取到页面中所有的audiovar audios = document.getElementsByTagName('audio')// nodeList => ArrayArray.from(audios).forEach((item) => { // 监听某一个正在播放,停止其他audio元素 item.addEventListener('play', function () { Array.from(audios).forEach(i => {原创 2021-11-26 09:36:58 · 230 阅读 · 0 评论 -
微信端网页ios手机长按屏幕变暗问题
ios微信端运行html5页面时最近常遇到长按屏幕空白区域网页变暗的情况,后续百度并未找到答案,后来经过测试我找到了解决方案,但是不确定变暗的最终原因长按网页空白区域变暗的原因之一是网页中标签没有闭合的情况第二个原因是:空白区域没有铺满整个屏幕。解决办法使整个页面分为几个块状元素并沾满屏幕即可,若某一个块状元素中并没有内容,要尝试用js或者其他办法设置宽高让他沾满屏幕中剩余部分。原创 2018-01-18 09:54:16 · 1114 阅读 · 0 评论 -
flex布局文本不换行不显示省略号的解决方法
<div class="container"> <div class="title">我是标题</div> <div class="content"> <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p> </div></div>.container{ display:flex;}.title{ widt原创 2017-11-14 19:47:22 · 6063 阅读 · 0 评论 -
position:fixed失效问题
fixed定位的元素,如果父级有transform样式,值不为none,那么fixed定位就会失效。解决方法:使用transform样式的元素,不要包含fixed定位的子元素。原创 2017-10-12 09:43:14 · 1683 阅读 · 2 评论 -
input file 无法打开手机端文件选择器
手机端对input file的accept格式有特定的要求,必须要image/.这种的格式,否则会在点击上传时弹出无法打开文件选择器这样的提示框 <input type="file" id="inputImage" name="file" accept="image/gif,image/jpg,image/jpeg,image/bmp,image/png">pc端对格式没有过多的要求,也可以如下格式原创 2017-11-15 10:24:03 · 18916 阅读 · 2 评论 -
输入框中光标位置
1.获取光标所在位置(selectionStart属性)2.设置光标到指定位置(setSelectionRange方法)原创 2017-09-27 11:33:56 · 1764 阅读 · 0 评论 -
ios输入框二次输入弹起问题
bug描述移动端页面 input输入框第一次触摸可以弹起键盘,后续再触摸需要很难弹起键盘,或者需要在输入框停一会才能弹起键盘。锁定问题:fastclick插件问题解决办法: FastClick.prototype.focus = function(targetElement) { targetElement.focus(); };本文借鉴地址...原创 2018-10-19 16:28:07 · 554 阅读 · 0 评论 -
移动端touch事件穿透解决办法
1.延迟&&遮挡由于 click 事件具有滞后性,在这段时间内原来点击的元素消失了,触发了元素底部某元素的点击事件,于是便“穿透”了。因此我们可以让元素的消失变长,给元素的消失做一个fade效果,类似jQuery里的fadeOut,并设置动画duration大于300ms,这样当延迟的 click 触发时,就不会“穿透”到下方的元素了。同理,不用上述办法,我们可以动态地在触摸位置生成一个透明的元素,转载 2017-07-12 21:06:16 · 5650 阅读 · 0 评论 -
webpack编译-webkit-box-orient: vertical 消失问题解决方案
/! autoprefixer: off / -webkit-box-orient: vertical; /* autoprefixer: on */原创 2018-05-04 11:58:52 · 1220 阅读 · 0 评论 -
webpack报错总结
报错信息Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.configuration.module has an unknown property ‘loaders’. These propert...原创 2019-03-22 15:16:31 · 728 阅读 · 0 评论 -
Chrome高版本使用screenfull.js全屏功能时报参数错误
报错问题:Uncaught (in promise) TypeError: Failed to execute ‘requestFullscreen’ on ‘Element’: parameter 1 (‘options’) is not an object.解决办法:找到node_modules中screenfull.js文件修改其中部分代码即可借鉴网址,其中有改动原因...原创 2019-03-27 15:39:55 · 11649 阅读 · 4 评论 -
使用Mobiscroll插件 输入框初始化默认出错问题
使用步骤: 1. 首先,使用mobiscroll插件之前引用以及下载好需要使用到的css以及js文件 2. 在要使用时间插件的html文件中创建input标签 3. 在body底部写入js的配置项,并进行调用即可.问题描述在使用中我们常常需要给予input框一个默认值,我们预期想法就是当点击输入框时,时间插件显示与默认值一致,但情况并非如此,图中input的默认值为2017-09-30,但是显原创 2017-09-25 16:56:10 · 2380 阅读 · 0 评论 -
ios-safari浏览器存储问题
当safari手机开启无痕浏览时会导致localstorage存储失败,js报错,可以加以下判断try{ window.localStorage.setItem('curTab', this.currentTab) // 记录当前tab }catch(e){ alert("本地储存写入错误,若为safari浏览器请关闭无痕模式浏览。"); }...原创 2019-01-30 12:59:06 · 1397 阅读 · 0 评论 -
jquery 通过id获取元素时id带.的处理方案
<div class="wrap"> <div id="form.1"> 1111 </div></div>方法一$('#form\\.1').html()方法二$("[id='form.1']").html()原创 2018-09-06 10:51:21 · 3250 阅读 · 0 评论 -
bunyan日志框架自带字段重写问题
const utils = require('./utils.js'); // 时间格式化函数const bunyan = require("bunyan");const log = bunyan.createLogger({ name: 'app', streams: [ { level: 'error', s...原创 2019-09-24 16:13:47 · 240 阅读 · 0 评论