- 博客(40)
- 资源 (3)
- 收藏
- 关注
原创 禁用ios浏览器页面上下滚动回弹效果
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>Demo</title> <style> html,bo.
2022-04-12 16:34:37
1478
原创 vue路由缓存list,导致页面不刷新问题。
再缓存页面监听路有变化,根据参数来手动刷新页面watch:{$route(route) {if(route.path == '/storeList' && route.query.storeLevel !== this.params.storeLevel) {this.params.storeLevel = route.query.storeLevelthis.reload()}}},...
2022-01-21 20:07:26
626
原创 H5移动端 文本居中问题,解决字体偏上
找到类修改字体:{display: flex;justify-content: center;align-items: center;line-height: normal; //安卓字体偏上vertical-align: middle;font-family: sans-serif; //苹果手机缺少字体}
2022-01-21 14:52:45
1231
转载 JS中的算法与数据结构——链表(Linked-list)
数组不总是最佳的数据结构,数组有长度限制为2的23次方-1,如果数组被填满,对于数组的删除和添加操作,通常需要将数组中的其他元素向前或者像后平移。 在js中的数组不存在上诉问题,主要是因为他们被实现成了对象,但是比其他语言相比,效率会低很多(c或java)。 所以,我們可以考虑使用链表,除了对数据的随机访问,链表几乎可以在任何可以使用一维素组的情况中。如果你正巧在使用c活javs等高级语言,你...
2019-07-31 12:07:42
165
转载 Canvas 最佳实践(性能篇)
Canvas 想必前端同学们都不陌生,它是 HTML5 新增的「画布」元素,允许我们使用 JavaScript 来绘制图形。目前,所有的主流浏览器都支持 Canvas。Canvas 最常见的用途是渲染动画。渲染动画的基本原理,无非是反复地擦除和重绘。为了动画的流畅,留给我渲染一帧的时间,只有短短的 16ms。在这 16ms 中,我不仅需要处理一些游戏逻辑,计算每个对象的位置、状态,还需...
2019-07-31 12:07:14
316
转载 提高canvas性能技巧
一.预渲染错误代码: var canvas = document.getElementById("myCanvas"); var context = this.canvas.getContext('2d'); var drawAsync = eval(Jscex.compile("async", function () { while (...
2019-07-31 11:06:42
477
转载 vue 七牛云上传文件步骤及问题汇总
官方API文档:https://developer.qiniu.com/kodo/sdk/1283/javascript步骤:1、前台使用vue,后台传递一个 token。2、token : 这个相当于一个密钥。npm安装:npm install qiniu-js<template> <div class="ft-plant-upload-b...
2019-07-15 16:48:53
4733
原创 input-vue 多页面开发上传图片
vue <input type="file">上传图片、预览、删除使用原生<input type="file">上传图片、预览、删除;multiple实现可上传多张参数名 类型 说明 fileTypes Array 文件类型, 默认'jpeg','bmp','gif','jpg' limit Number 限制数量,默认5...
2019-07-15 16:46:25
206
原创 动态改变json key值
var fieldName = "email";var order = {};order[fieldName] = "asc"
2019-06-13 15:59:25
1372
转载 了解HTMLCanvasElement.toDataURL()
Canvas本质上就是一个位图图像,因此,浏览器提供了若干API可以将Canvas图像转换成可以作为IMG呈现的数据,其中最老牌的方法就是HTMLCanvasElement.toDataURL(),此方法可以返回Canvas图像对应的data URI,也就是平常我们所说的base64地址。格式如下:data:[<mime type>][;base64],<data>...
2019-05-22 12:09:25
1524
转载 微信小程序开发 - (图片base64编码)
Base64编码 是网络上最常见的用于传输8Bit字节代码的编码方式之一,可用于在HTTP环境下传递较长的标识信息,因此在很多有关图像的应用或者接口调用中,base64编码常常被用来进行传输图片数据。Base64编码在小程序中一直不是特别完善,为了解决这类问题,本文根据具体的应用场景总结了三种方法来获取图片的Base64编码。1. canvas画图适用场景: 获取canvas绘出的图片...
2019-05-14 17:24:15
1479
原创 手机端点击按钮阴影 ios输入框阴影解决方法
ios输入框阴影input{ -webkit-appearance: none;}点击按钮 阴影a,button,input { -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color:transparent; outline: 0;}...
2019-04-18 14:12:21
506
原创 如何解决小程序textarea层级最高的问题
问题重现: 当你一个页面有一个textarea的组件的时候,出现一个弹层,你的textarea的placeholder的内容是弹层上面的,我们可以当弹层出来的时候,给这个textarea的组件隐藏起来,比如说display:none;opacity:0;visibility:hidden;但是 这是不可取的,无法解决这个问题,隐藏节点的方式不行,那只能销毁节点了,正确的姿势如下。...
2019-03-04 11:46:49
251
转载 vue文件中监听input输入事件-oninput
vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址: .vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件。需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput。oninput 事件在用户输入时触发,菜鸟教程中的用法是:但是在.vue中这样写是没有作用的:<input type="text" id="cardsNu...
2019-03-01 14:36:52
1030
原创 小程序组件实现周日历功能,课程表、食谱等功能可能会用到的日历简单实现
前言 四个月前提起兴趣发表的这篇博客,两天劲头就过了,写的也是乱七八糟的,这次想真正的把博客建立起来,第一步要做的事情就是把这篇博客好好的改善一下,给过去一个好的交代,给未来一个好的开始。万事开头难,这次一定坚持下去。一、功能演示说明先详细的展示功能图片以及功能说明,以确保大家看到这里能确定功能是否是自己想要的。这是一个可以实现课程表、食谱等一些功能的周日历,并且注意这是一个...
2019-02-27 15:50:28
3314
6
原创 解决 html5 input type='number' 类型可以输入e
当给 input 设置类型为 number 时,比如,我想限制,只能输入 0-9 的正整数,正则表达式如下:/^[0-9]?$/ // 匹配 0-9 的整数且只匹配 0 次或 1 次用正则测试,小数点是无法通过的,且,因为 设置了类型为 number,也无法输入字母,但实际上,1. 类似这样的不合规则的数字是可以通过验证的,且,可以键入字母 e,因为 e 在数学上代表2.71828...
2019-01-21 16:21:54
730
原创 vue el-checkbox实现全选单选
要求的页面结构是这样的:遇到了许多问题,如:点击tab切换后 全选按钮要点击2次可以生效。。。我这里就不一 一多说了。直接上代码。<el-row class="list-header"> <el-col :span="6"><el-checkbox class="checkbox" :checked="isCheckedAll" v-mod
2018-11-02 16:11:48
12121
原创 移动端rem布局js代码,横竖屏适配
最开始做移动端项目的时候,页面适配并没有考虑横屏的情况。后续因为手机开启可以旋转状态,整体布局出现了问题。所以对适配作出了相应调整:detectOrient();window.onresize = function(){ detectOrient();};//判断横屏竖屏function detectOrient() { var width = document.docume...
2018-10-11 17:57:27
2517
转载 移动端 强制用户竖屏显示
最近工作中写了一个移动端的页面,就是我写的这个页面需要放在一个APP中,但是这个APP是横屏的,打开这个页面的webview也是横屏的(最新版的APP打开的时候是竖屏的webview),本来我们是用的rem布局,横屏的状态下也是没有什么问题的,但是甲方希望在横屏打开的时候强制这个页面竖屏显示。所以就有了下面一系列的操作了。首先是判断横屏的状态,使用的一下的代码:function orie...
2018-10-09 16:14:45
1806
转载 小程序构建骨架屏的探索
首屏一般情况下,在首屏数据未拿到之前,为了提升用户的体验,会在页面上展示一个loading的图层,类似下面这个:其中除了菊花图以外网上还流传这各种各样的loading动画,在PC端上几乎要统一江湖了,不过最近在移动端上面看到不同于菊花图的加载方式,就是这篇文章需要分享的Skeleton Screen,中文称之为"骨架屏"概念A skeleton screen is essen...
2018-09-28 17:36:37
603
转载 js判断当前使用的是wifi还是流量
<script type="text/javascript"> var connection = navigator.connection||navigator.mozConnection||navigator.webkitConnection||{tyep:'unknown'};var type_text = ['unknown','ethernet','wifi'...
2018-09-20 15:30:59
10388
转载 axios处理http请求,对比ajax
axios中文文档 https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format axios文档在处理http请求方面,已经不推荐使用vue-resource了,而是使用最新的axios,下面做一个简单的介绍。安装使用nodenpm install axios ...
2018-09-13 19:06:46
1650
原创 iframe子页面弹出框遮罩层问题的解决方法
问题描述:iframe内的遮罩层未遮挡父级元素, 若把蒙版放在父页面,蒙版会遮挡住iframe内所有元素。代码结构:解决方法一: 可以使用layer框架,框架里面可以定义,具体可以查看文档。(我没使用这个框架,因为我觉得引入一个框架只为了使用其中的模态框不划算。) 解决方法二:(刚开始使用的这个方法,还是存在问题)思路:打开子页面的同时,分别动态生成头部和左侧菜...
2018-09-13 18:53:21
7843
转载 Vue-cli 本地开发请求https 接口 DEPTH_ZERO_SELF_SIGNED_CERT 500
环境:npm run dev 本地开发连接后台的开发环境的接口。贴上proxyTable 的转发proxyTable: { "/api": { target: "http://XXX.XX.XX.XXX:9255", // 对应写上您要发送的接口地址 pathRewrite: {"^/api" : ""},}忽然间,后台接到命令,准备升级测试SSL,做HTTPS的升级。...
2018-09-10 18:13:17
1307
1
原创 vue el-upload上传图片到七牛
一、思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload。二、代码。<el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input> <el-col :span="10" class="mt10"&
2018-08-11 10:25:02
4789
原创 vue中使用vue-quill-editor富文本编辑器,自定义toolbar,图片上传到七牛
一、npm 安装 vue-quill-editor 二、在main.js中引入import VueQuillEditor from 'vue-quill-editor'// require styles 引入样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dis...
2018-08-11 10:13:16
2967
转载 npm安装教程
一、使用之前,我们先来掌握3个东西是用来干什么的。npm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)开始:...
2018-08-02 16:54:28
625
原创 git命令使用说明
1. 下载 git clone2. 更新代码 a. 更新当前分支 git pull --rebase //同时做rebase操作 i. 遇到合并时, 会提示有冲突, 解决冲突后才能继续 1. 解决冲突 a. git status -s //查看状态, 红色的代表需要解决冲突的代码 ...
2018-08-01 16:23:32
111
原创 vue在IE和360兼容模式下无法显示问题
babel-polyfillbabel-polyfill 是针对全局环境的,引入它浏览器就好像具备了规范里定义的完整的特性,一旦引入,就会跑一个 babel-polyfill 实例。用法如下:1.安装 babel-polyfillnpm install babel-polyfill --save2.在入口文件中引用:import 'babel-polyfill'针对ES...
2018-07-31 15:19:18
4265
3
原创 vue axios跨域、vue+elementUI+axios代理服务
vue axios第一步:使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/api/homepage。不同域名之间的访问,需要跨域才能正确请求。跨域的方法很多,通常都需要后台配置,不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,通过修改vue proxyTable接口实现跨域...
2018-07-25 20:16:56
4524
原创 移动端web适配屏幕,PC端在ios屏幕固定
问题描述:官网在ios手机上打开时,没有填充整个屏幕大小,出现滚动条,可以左右滑动。在Android手机上则没有这个问题。 问题解决:/** * MobileWeb 通用功能助手,包含常用的 UA 判断、页面适配、search 参数转 键值对。 * 该 JS 应在 head 中尽可能早的引入,减少重绘。 * * fixScreen 方法根据两种情况适配,该方法自动执...
2018-07-23 10:46:01
948
转载 兼容火狐浏览器的select下拉框样式
解决方法 <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> <style> @-moz-document url-prefix() { select.form-con...
2018-07-20 18:36:19
2989
原创 如何js引入百度地图
具体流程打开百度api文档-申请秘钥-添加域名白名单-引入api<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=此处为秘钥"></script><div id="map_show"></div>func
2018-07-20 15:31:32
8476
原创 td内不会自动换行,解决方法
1.在<td>中设置样式style为word-wrap:break-word;word-break:break-all;(一般情况只需要设置word-break:break-all即可,但是有时候需要加word-wrap:break-word )2.把表格的sytle的table-layout:fixed,表格固定宽度,表格即要自适应他外面的容器,也不要撑出去,然后设置td的word...
2018-07-20 14:58:12
7461
1
原创 PC端页面布局,在移动端查看头部和底部出现留白
问题出现:body,html未填充满可视区域页面布局:<div class="full"> <div class="margin"> 页面内容 </div></div>初始化样式:html, body, div,iframe, p, ul, ol, li, dl, dt, dd, h1, h2, h...
2018-07-20 14:42:43
3793
原创 前端js分享插件运用(空间,QQ,微信,微博,豆瓣)
直接上代码<div class="share"> <div id="share-2"></div></div><script> // 分享可用的配置有: // url : '', // 网址,默认使用 window.location.href
2018-07-19 18:17:39
3053
原创 Vue项目 头像处理方案
个人思路获取后台返回头像url,判断图片宽度,高度。如果宽度>高度, 使其高度填充盒子 两边留白。如果宽度<高度,使得宽度填充盒子 上下留白。效果图:缺陷:懒加载图片 会出现闪烁 代码实现.heads width 1.04rem height 1.04rem border-radius 50% overflow hidd...
2018-07-19 17:25:37
2392
转载 Vue项目 ios 页面留白解决方案(尤其是webView)
问题描述:进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决原因分析: 在ios机器上使用webview开发Vue项目时候,go history(-1), 无法将body的高度拉掉,使得遮住,触发轻点击,方可消除遮罩解决的理论:用于最重要的html 容器是container,然而因为设置html、body高...
2018-07-19 16:49:24
3856
转载 jQuery实现图片懒加载的两种方法记录
记录一整体思路:设置个data-original(自定义一个属性)来存放真实地址 当滚动页面时,检查所有的img标签,看是否出现在视野中,如果已经出现在了视野中,那继续再进行判断,看其是否已经被加载过了,如果还没有被加载过,那就进行加载。代码: lazyRender(); var clock; //优化思路是当鼠标滚轮停止滚动的时候,再去判定是否存在在视野中,而不...
2018-07-19 16:29:46
785
jscex.async.js
2019-08-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人