- 博客(40)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 禁用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关注的人