4 雪莲的博客

尚未进行身份认证

我要认证

暂无相关简介

等级
TA的排名 5w+

前端-图片压缩canvas干货

需要用户上传图片的时候,怎样只通过前端来压缩图片的大小呢?往下看⬇️//canvas压缩图片 参数base64,callback回调函数(由于加载图片是异步的,所以必须要用回调函数来获取base64的图片)export function imgZip(file, callback) { let img = document.createElement('img'); //创建图片元...

2019-07-25 17:00:11

解决HBuiderX打包vue项目为app后,cookie不能读写问题

我之前习惯将token及用户信息等存到cookie,发现HBuiderX打包vue项目为app,运行之后cookie不能读写。后来换成存储localStorage可以解决window.localStorage.setItem(name,value)window.localStorage.getItem(name)...

2019-05-31 11:30:50

使用HBuilderX 打包 vue 项目 为 App 的步骤

这里,我的项目是vue-cli构建的工程,h5移动端页面。由于开发成本并没有用安卓或ios原生语言来开发app,而是选择将现有项目直接打包。下面我会分享一下HBuilderX 打包 vue 项目 为 App 的步骤。希望对有需求的同学提供帮助。原vue项目打包dist文件1、首先以及必须,将config文件夹里的index.js文件中assetsPublicPath由'/'改为 '...

2019-05-31 11:23:22

vue 不固定宽度文字超出显示...鼠标移入浮层显示全文,模拟title浮层方法

先说说思路:1、不固定宽度文字超出显示...,用的css3     overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2、文字超出的地方鼠标移入显示全文。我的思路是这样的,先获取容器的宽度、字号、全部文字,把获取的全部文字放到一个动态生成的span中,给span设置字号为容器的字号,再获取出来span的长度,容器宽度小于span...

2018-05-03 09:54:17

解决vue切换路由后上一个页面监听scroll滚动事件会在新页面报错问题

vue中写有滚动事件监听页面的时候,我是这样写的mounted () {            window.addEventListener('scroll', this.handleScroll);//监听页面滚动事件        },这样写在当前页面是没有任何问题的,但是同事发现从我的这个页面跳转到他的页面的时候,随着页面滚动报了很多错,思前想后,结合vue的原理发现,vu

2018-02-02 17:48:31

vue2.0路由切换后页面跳转后新页面滚动位置不变BUG

解决办法很简单,如下,直接监测watch路由变化,然后将body的滚动距离scrollTop赋值为0。export default {        watch:{            '$route':function(to,from){           document.body.scrollTop = 0;                 document.docu

2018-02-02 17:39:23

解决app内嵌h5中ios获取不到title,vue router 修改title(IOS 下动态改变title失效)

在ios下app  设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的。vue中npm install  vue-wechat-title组件在路由配置中添加  meta对象 如:路由尾部添加Vue.use(require('vue-wechat-title')); //实例化参数所需要动

2018-01-22 16:58:30

解决html页面中含有input输入框fixed布局底部按钮在Android和ios中被弹起的问题

html页面在安卓或ios中fixed 页面底部的按钮常常会被弹起,如图,当input获取焦点唤起软键盘的时候,下一步按钮被悬在半空中,那么如何解决呢?起初,顶部餐饮商家头部是fixed在顶部,下一步按钮fixed在页面底部,滑动中间内容部分的时候,头部和底部是固定不动的。但是当input获取焦点唤起软键盘的时候,下一步按钮会悬在半空中,所以我采用position:absolute

2017-12-14 13:44:12

解决js点击click事件在iOS设备上事件延时闪烁的问题

闪烁问题由于在iOS Safari上click事件存在300ms响应延时,所以为touch事件添加样式,会和click事件默认样式叠加而产生闪烁问题。因为ios safari浏览器中对触摸事件的响应顺序是:ontouchstart -> ontouchmove -> ontouchend -> (300ms) onclick快速解决问题的方法:消除click默认样式

2017-12-14 10:52:39

用better-scroll来解决ios中html5页面fixed布局不兼容问题的处理

在做webapp的时候,会遇到顶部导航,底部按钮之类的需求,前端第一想到的就是fixed定位,在Android中是没有问题的,然而在ios中却不那么尽如人意。给大家介绍一个方法,仍然使用fixed,只不过在需要滚动部分的外层再加一层div,也是fixed布局。这里需要用到better-scroll插件。首先,来看一下页面:

2017-12-07 18:23:46

input框在ios中的阴影问题

在IOS下,input 和textarea表单默认会有个内阴影,一定程度上影响视觉一致,可通过设置下面代码去掉:input{-webkit-appearance: none;}

2017-12-07 17:40:12

vue上拉加载更多

因为我们项目中,还用了swiper。。。很多都是滑动切换的,但是又得上拉加载,所以导致,很多UI框架,我们用了,都有不同的bug出现,没办法,最后写了一个。代码如下(这个因为很多地方会用,所以建议放在components/common下面):.loadmore{width:100%;}export default {name:

2017-11-06 15:03:06

js设置手机号中间几位为隐藏星代替 (正则)

var reg = new RegExp("(\\d{3})(\\d{4})(\\d{4})");var tel = mobile.replace(reg, "$1****$3");$('.phone').text(tel);

2017-10-12 16:06:10

HTML5页面被运营商进行DNS劫持问题及解决方案,app中h5页面源码的获取

App应用的html5页面经过运营商的移动网络(非wifi网络),被强制插入广告和手机管家的多余信息,在有些场景严重干扰用户的操作,也产生在美丽的页面上加入了不协调的悬浮层。并且这个手机管家类的悬浮层有时间出现,有时间不出现,神出鬼没,虽然你可以通过点击关闭手机手机关键是突然出现,有时候还关闭不了。总之用户不喜欢这种用户不需要的选择,所以干掉它吧! 在app中h5页面源码,可以通过下面代码获得

2017-09-18 14:40:46

调用微信sdk接口的录音功能

一定要引入jweixin-1.0.0.js先来一段html代码:录音看看js是如何操作的// 手指按下录音      $('.btn').on('touchstart', function(event){    event.preventDefault();//阻止浏览器默认行为    START = new Date().getTime();    $('.t

2017-09-13 15:18:39

拉钩、网易、淘宝移动端rem布局分析(转载非原创)

从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:)。这是淘宝的github网址,里面有适配所需的js还有说明文档 地址:https://github.com/amfe/lib

2017-08-16 17:47:25

表单验证

先来看看html部分姓名:联系方式:参加人数:房间要求:大床房标间套房是否需要酒店提供早餐:是否参加板块选择(可多选):ABC酒店选择:请选择酒店万达皇冠假日酒店万达文华度假酒店敖麓谷雅酒店哈尔滨凯宾斯基酒店香格里拉大酒店(松北)凯莱花园大酒店马迭

2017-07-19 13:37:37

20个正则表达式,让js校验不在难

正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。正则表达式经常被用于字段或任意字符串的校验,如下面这段校验基本日期格式的JavaScript代码:var reg = /^(\\d{1,4})(-|\\/)(\\d{1,2})\\2(\\d{1,2})$/; v

2017-07-17 16:12:47

JS生成二维码(兼容各种浏览器及中文)

本文将介绍如何使用js生成二维码,兼容各种浏览器及手机端,支持中文。html>head>meta charset="utf-8"/>title> JS 生成二维码 title>script src="qrcode.js">script>script type="text/javascript">window.onload = function(){ //

2017-07-11 16:49:31

移动端布局终极解决方案hotcss

插件描述:hotcss不是一个库,也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。hotcss让移动端布局开发更加容易介绍hotcss不是一个库,也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。使用动态的HTML根字体大小和动态的viewport scale。遵循

2017-06-21 15:51:42

查看更多

勋章 我的勋章
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。