![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
mini_qiu
这个作者很懒,什么都没留下…
展开
-
滚动条出现挤压页面宽度,影响布局
问题描述:当页面突然出现滚动条的时候,页面会突然被挤压,因为滚动条也是需要占位的呀。解决思路:现在目标就是滚动条出现,但是内容位置不变,依然不动。1、新属性overlaychrome下overflow有个新的属性值overlay,这个属性简直就是为了这个问题而生,他和auto有点像,但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾,这个属性值目前只有chrome支持。html { overflow-y: overlay;}2、margin-right: calc(100%转载 2022-05-27 11:03:10 · 2278 阅读 · 4 评论 -
JS各种表单验证
/** * 验证电子邮箱格式 */function email(value) { return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value);}/** * 验证手机格式 */function mobile(value) { return /^1[3-9]\d{9}$/.test(value)}/** * 验证身份证号码 */function idC.转载 2022-05-09 10:48:56 · 278 阅读 · 0 评论 -
vue使用document.execCommand(‘Copy‘)实现复制功能
// 复制 doCopy(){ const input = document.createElement('input'); input.value = this.cardID; document.body.appendChild(input); input.select()//选中输入框 document.execCommand('Copy')//复制当前选中文本到前切板 document.body.removeChild(in...原创 2021-06-21 11:50:58 · 1232 阅读 · 1 评论 -
div的高度为什么会比子元素多几个像素
例如:<div class="relative"> <img src="img/1_sign_in/ico_ckao.png" > <div class="absolute"> XXX </div> <div class="absolute"> XXX </div></div>运行结果:除了img以外的元素都是绝对定位,希望最外层div的高度跟img高度一致最外层div的是白色边框.原创 2021-05-20 14:51:39 · 643 阅读 · 0 评论 -
vue3中使用el-form跟el-select时出现不能选中的问题
检查el-form的ref跟model是否同名了,如果同名了,会出现很多未知的bug,比如ref双向绑定的数据可以打印,但是属性读不到之类的错误原创 2021-03-08 16:32:27 · 1393 阅读 · 0 评论 -
error ‘XX‘ is defined but never used no-unused-vars eslint报错
这是eslint的格式校验跟规范化,我们可以通过配置.eslintrc.js关闭校验:添加:"no-unused-vars":"off",这里建议把下面的配置也带上:"no-mixed-spaces-and-tabs": "off"这个是关闭空格、tab键格式检验的。...原创 2021-02-01 15:03:55 · 1404 阅读 · 1 评论 -
封装的localStorage、sessionStorage的存取函数,可以配置过期时间
/** * localStorage * @调用:_local.set('access_token', '123456', 5000); * @调用:_local.get('access_token'); */var _local = { //存储,可设置过期时间 set(key, value, expires) { let params = { key, value, expires }; if (expires) { .原创 2021-01-12 09:22:24 · 1434 阅读 · 0 评论 -
vue如何给自带默认回调参数的函数添加自定义参数:$event
原来的代码是这样的:handleAvatarSuccess会回调两个参数,这个时候如果直接在里面添加形参接不到<el-upload :on-success="handleAvatarSuccess"></el-upload>handleAvatarSuccess(res) { //自带的回调参数res跟file console.log('res', res)},修改后:<el-upload :on-success="($event) =>{han原创 2021-01-09 17:40:51 · 4728 阅读 · 3 评论 -
vue cli3 打包后访问不到页面 Failed to load resource: the server responded with a status of 404 (Not Found)
在根目录下新建文件vue.config.js配置打包资源路径:默认是“./”,如果没有特殊需求就不要修改代码如下:const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { publicPath: './static', //这个路径根据自己的情况定,默认就填"./",因为我静态资源的路径必须要在static文件夹下.原创 2021-01-09 14:22:13 · 12914 阅读 · 2 评论 -
没有mac设备怎么在safari打开控制台调试ios移动端
用微信公众平台提供的vconsole如果是原生的html页面,就加上以下代码:<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script><script> // init vConsole var vConsole = new VConsole(); console.log('Hello world');</s..原创 2020-12-10 10:28:13 · 1209 阅读 · 0 评论 -
css实现水平垂直居中常用的几种方式
1、绝对定位:父元素:position: relative;子元素:position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);2、flex布局&margin:父元素:display: flex;子元素:margin: auto auto;3、纯flex布局:(要注意主轴方向)父元素:display: flex;justify-content:..原创 2020-08-11 15:25:49 · 100 阅读 · 0 评论 -
区分几个js常用的字符串处理方法和数组操作方法
1、常用数组操作的方法:Array.concat() 连接数组Array.push() 尾部添加Array.pop() 尾部删除Array.unshift() 头部添加Array.shift() 头部删除Array.splice(index,many,item1,…,itemX) 插入、删除或替换数组的元素 当不带item1..时是删除,带item时是替换或者插入取决于many的取值Array.slice(start,end) 返回数组的一部分Array.join() 将数组元素连接起来以构原创 2020-08-11 14:02:16 · 328 阅读 · 0 评论 -
vue中报错:Avoided redundant navigation to current location
在vuecli项目中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复,在router的index.js中加上这段代码:const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).c原创 2020-07-15 09:26:40 · 486 阅读 · 0 评论 -
微信小程序中wx:for怎么嵌套两层循环
<view wx:for="{{orderList}}" wx:key="item"> <view wx:for="{{item.order_info}}" wx:key="idx" wx:for-item="pro"> </view></view>只需要在内层循环中设置一个wx:for-item 属性即可原创 2020-05-11 20:09:57 · 10444 阅读 · 1 评论 -
js读写json文件
js读json文件:<div> <input type="file" id="files"/></div> <script> var inputElement = document.getElementById("files"); inputElement.addEventListener("change", ha...原创 2020-02-29 11:45:20 · 13278 阅读 · 3 评论 -
axios 发 post 请求,后端接收不到参数的解决方案
很简单的需求:axios({ headers: { 'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, method: 'post', url: '/api/lockServer/search', data: { username: username, pwd: pwd ...原创 2020-01-03 15:38:27 · 167 阅读 · 0 评论 -
not(:last-child)的用法
网上看资料时看到的用法,以前没接触过,看到之后不禁感叹这用法太人性化了,极大方便了敲代码:<style> ul{ list-style: none; } li{ display: inline; } li:not(:last-child)::after{ content: "|"; }...原创 2020-01-02 10:59:32 · 8965 阅读 · 2 评论 -
JSON.parse()与JSON.stringify()的区别
JSON.parse()与JSON.stringify()的区别JSON.parse()【从一个字符串中解析出json对象】例子://定义一个字符串var data='{"name":"goatling"}'//解析对象JSON.parse(data)结果是:name:"goatling"JSON.stringify()【从一个对象中解析出字符串】...原创 2019-12-09 15:00:09 · 114 阅读 · 0 评论 -
uni-app登陆成功跳转到首页后禁止回退到登陆页面
用uni-app提供的接口uni.reLaunch(OBJECT),跳转之后可以关闭所有页面,打开到应用内的某个页面。原创 2019-12-04 09:28:50 · 10492 阅读 · 7 评论 -
uni-app怎么实现双击返回退出app
uni-app提供了一个监听返回按钮的api:onBackPress(event)//监听返回键 onBackPress() { uni.showModal({ title: '提示', content: '是否退出来聊?', success: function(res) { if (res.confirm) { // 退出当前应用,改...原创 2019-12-03 15:10:17 · 8195 阅读 · 4 评论 -
uni-app在手机上背景图片不显示
uni-app解决无法加载本地图片的方法【动态加载背景图片*唯一的解决办法】特别注意:千万别忘记了【`url(${indexBackgroundImage})`】<template> <view class="index" :style="{backgroundImage:`url(${indexBackgroundImage})`,backgroundSize:...转载 2019-12-02 18:16:15 · 9131 阅读 · 0 评论 -
js的unshift、shift、 push、pop方法的区别与用法
把这个图记下来就可以了原创 2019-11-30 16:58:44 · 279 阅读 · 0 评论 -
var、let、const的区别
首先是var:不论是重新定义还是重新赋值都可以,不会报任何错误let:let重新定义不行,重新赋值可以const:不管是重新定义一遍还是再赋值都不行,会报错 相当于定义了一个不可被更改的常量那么有人就会问,我如果非要修改咋办?只要你定义的是一个对象这种,那么const指向的就是对象的地址,虽然对象内部值修改了但它还是那个对象...原创 2019-10-12 17:10:31 · 85 阅读 · 1 评论 -
微信小程序弹窗会出现遮罩层滚动穿透的问题
1.如果弹出层没有滚动事件,就直接在蒙板上加catchtouchmove="move" move:function(){};2.如果弹出层有滚动事件,那么在弹出层出现的时候给底部的containerView加上一个样式。<view class="{{showSearchView?'tripList_root':''}}">.tripList_root{ ...原创 2019-10-12 10:30:25 · 1666 阅读 · 0 评论 -
函数形参里面“...”三个点表示什么
如果是是形参 里面出现,表示的是可变参数,即表示的传入的参数个数是可变,你传多少个参数都被放到一个数组里面。function demo (...values) { console.log(values) console.log('-----------------------')}demo(1,2,3,4) //输出结果:[1,2,3,4] --------------...原创 2019-09-11 16:40:12 · 4728 阅读 · 0 评论 -
localStorage、sessionStorage、cookie、session的区别
localStoragelocalStorage生命周期是永久,除非用户主动清除数据,否则会永远存在。仅在客户端(即浏览器)中保存,不参与和服务器的通信。(储存空间一般为5M)sessionStoragesessionStorage仅在当前会话下有效,关闭页面或者浏览器之后就会被清除。与localStorage一样仅在客户端(即浏览器)中保存,不参与和服务器的通信。(储存空间一般为5M...原创 2018-11-01 11:30:02 · 161 阅读 · 0 评论 -
学习前端的一些笔记
原创 2018-10-16 10:52:21 · 123 阅读 · 0 评论 -
理解JS中的offsetWidth
首先来看看这个div1:#div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; background:green;}它的offsetWidth是多少?200px吗?应该是206,因为offsetWidth实际获取的是盒模型(width+border + padding) ...原创 2018-09-06 10:48:01 · 553 阅读 · 0 评论 -
简单粗暴地理解js原型链--js面向对象编程
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好。不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么。简单粗暴点看原型链吧,想点与代码无关的事,比如人、妖以及人妖。1)人是人他妈生的,妖是妖他妈生的。人和妖都是对象实例,而人他妈和妖他妈就是原型。原型也是对象,叫原型对象。 2)人他妈和人他爸啪啪啪能生...转载 2018-08-23 09:53:42 · 157 阅读 · 0 评论 -
带你一分钟理解闭包--js面向对象编程
上一篇《简单粗暴地理解js原型链--js面向对象编程》没想到能攒到这么多赞,实属意外。分享是个好事情,尤其是分享自己的学习感悟。所以网上关于原型链、闭包、作用域等文章多如牛毛,很多文章写得很深入很专业,而我却喜欢用更简单方式来解说简单的事情。什么是闭包? 先看一段代码: function a(){ var n = 0; function inc() { ...转载 2018-08-23 09:50:47 · 154 阅读 · 0 评论 -
JavaScript出现 Uncaught TypeError: Cannot read property 'innerHTML' of undefined错误
原因: 意思就是当前的那个标签没有定义,原因是html的执行顺序是从上到下,在标签还没有加载的时候该方法就被调用了,所以会出没有定义的错误 解决办法有两个:一、最直接的方法就是将JavaScript代码放到该标签后面;二、第二个方法就是让页面加载完后再调用JavaScript的方法:window.onload = load;<script type=...原创 2018-08-20 10:59:15 · 45612 阅读 · 2 评论 -
css实现三角形
首先我们来看一下这种效果:div{ width: 0; height: 0; border-left: 80px solid red; border-right: 80px solid yellow; border-top: 80px solid pink; border-bottom: 80px solid black; }就是一个...原创 2018-08-22 17:33:32 · 158 阅读 · 0 评论 -
设置了margin:0 auto; 和宽度,为什么还是不能水平居中?
解决方法:父元素设为相对定位,将需要居中定位的元素设为绝对布局,并添加以下两行代码: position:absolute; left: 50%; transform: translateX(-50%);原创 2019-09-17 15:00:43 · 1695 阅读 · 0 评论 -
CSS中相对定位relative跟绝对定位absolute的详细作用
absolute:首先讲一下absolute, 设置absolute时他的父标签一定要设一个relative,因为absolute就是相对它来绝对布局的,这个时候只能用top、left、right、bottom来进行布局了,像margin就没用了,那么这些上下左右就是相对那个最近的带relative的父元素来定位的relative:再就是relative,元素自己设置relative就...原创 2019-09-19 14:48:13 · 307 阅读 · 0 评论 -
使用nth-of-type来实现的小程序列表布局小技巧
要实现这种布局该怎么做,这个水果列表是从后台api得到的通过wx:for循环出来的如果不处理,会是这个效果:要实现就需要将左边的一列向上移,那么怎么才能只操作到左边列呢?这里我们可以用.list-item:nth-of-type(2n){position: relative;top: -155rpx;}通过伪类选择器选择,然后设为相对布局,相对自己向上移...原创 2019-09-19 17:13:21 · 384 阅读 · 0 评论 -
js中的split()方法
就是一个按值分割字符串为数组的方法:例一:如图是将空格两边的字符串分割成了两个元素'abcd'和'ef'例二:有人就会问,如果有多个相同的分割符呢?如图分隔符就是e,可以这样理解:将e看成数组中的逗号',' 有四个e就有四个','...原创 2019-10-09 16:40:04 · 533 阅读 · 0 评论 -
flex弹性布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html博主写得非常详细原创 2019-10-08 16:36:29 · 129 阅读 · 0 评论 -
微信小程序中设置了flex-direction之后,水平居中跟垂直居中的设置反过来了
设置flex-direction: column;之后,盒子中的元素以列的方式排列,这个时候,跟行排列中,主轴的位置会互换,横轴会变成竖轴,竖轴会变成横轴,所以这个时候设置水平居中其实是行排列时的垂直居中即:align-items: center;会使元素水平居中,而行排列中的水平居中justify-content: center;则会使元素垂直居中...原创 2019-09-25 09:57:05 · 3078 阅读 · 0 评论 -
微信小程序z-index在ios系统中失效
z-index并不是 通过数值的大小来判断是否在上一层;只有在两者处于同级的情况下,z-index大的就会在另一块的上级。在微信小程序开发中的ios系统出现了这个bug,android手机都没有出现,所以将两者改为同级,需要在上一层层级的元素的定位为absolute(有时候也不一定要改成absolute,但是一定要处于同层级)...原创 2019-09-27 09:49:23 · 3125 阅读 · 0 评论 -
在JSON.stringify()(将对象等类型转换成json数据的方法)上爬过的坑
JSON.stringify()在处理字符串的时候,会自动在字符串上再加一个双引号,这样如果你在另外一个界面获取时,得到的会是""x"",而不是"x",特别是图片的网络地址这种时,图片一直报错,加载不出来,找这个错误心累。...原创 2019-09-25 09:17:54 · 866 阅读 · 1 评论