- 博客(49)
- 收藏
- 关注
RSS订阅原创 前端-图片压缩canvas干货
需要用户上传图片的时候，怎样只通过前端来压缩图片的大小呢？往下看⬇️//canvas压缩图片 参数base64，callback回调函数(由于加载图片是异步的，所以必须要用回调函数来获取base64的图片)export function imgZip(file, callback) { let img = document.createElement('img'); //创建图片元...
2019-07-25 17:00:11
296
1
原创 解决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
3242
1
原创 使用HBuilderX 打包 vue 项目 为 App 的步骤
这里，我的项目是vue-cli构建的工程，h5移动端页面。由于开发成本并没有用安卓或ios原生语言来开发app，而是选择将现有项目直接打包。下面我会分享一下HBuilderX 打包 vue 项目 为 App 的步骤。希望对有需求的同学提供帮助。原vue项目打包dist文件1、首先以及必须，将config文件夹里的index.js文件中assetsPublicPath由'/'改为 '...
2019-05-31 11:23:22
6322
7
原创 vue 不固定宽度文字超出显示...鼠标移入浮层显示全文，模拟title浮层方法
先说说思路：1、不固定宽度文字超出显示...，用的css3 overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2、文字超出的地方鼠标移入显示全文。我的思路是这样的，先获取容器的宽度、字号、全部文字，把获取的全部文字放到一个动态生成的span中，给span设置字号为容器的字号，再获取出来span的长度，容器宽度小于span...
2018-05-03 09:54:17
10307
1
原创 解决vue切换路由后上一个页面监听scroll滚动事件会在新页面报错问题
vue中写有滚动事件监听页面的时候，我是这样写的mounted () { window.addEventListener('scroll', this.handleScroll);//监听页面滚动事件 },这样写在当前页面是没有任何问题的，但是同事发现从我的这个页面跳转到他的页面的时候，随着页面滚动报了很多错，思前想后，结合vue的原理发现，vu
2018-02-02 17:48:31
6342
5
转载 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
4229
原创 解决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
7991
4
原创 解决html页面中含有input输入框fixed布局底部按钮在Android和ios中被弹起的问题
html页面在安卓或ios中fixed 页面底部的按钮常常会被弹起，如图，当input获取焦点唤起软键盘的时候，下一步按钮被悬在半空中，那么如何解决呢？起初，顶部餐饮商家头部是fixed在顶部，下一步按钮fixed在页面底部，滑动中间内容部分的时候，头部和底部是固定不动的。但是当input获取焦点唤起软键盘的时候，下一步按钮会悬在半空中，所以我采用position:absolute
2017-12-14 13:44:12
3061
转载 解决js点击click事件在iOS设备上事件延时闪烁的问题
闪烁问题由于在iOS Safari上click事件存在300ms响应延时，所以为touch事件添加样式，会和click事件默认样式叠加而产生闪烁问题。因为ios safari浏览器中对触摸事件的响应顺序是：ontouchstart -> ontouchmove -> ontouchend -> (300ms) onclick快速解决问题的方法：消除click默认样式
2017-12-14 10:52:39
1890
原创 用better-scroll来解决ios中html5页面fixed布局不兼容问题的处理
在做webapp的时候，会遇到顶部导航，底部按钮之类的需求，前端第一想到的就是fixed定位，在Android中是没有问题的，然而在ios中却不那么尽如人意。给大家介绍一个方法，仍然使用fixed，只不过在需要滚动部分的外层再加一层div,也是fixed布局。这里需要用到better-scroll插件。首先，来看一下页面：
2017-12-07 18:23:46
3532
3
原创 input框在ios中的阴影问题
在IOS下，input 和textarea表单默认会有个内阴影，一定程度上影响视觉一致，可通过设置下面代码去掉：input{-webkit-appearance: none;}
2017-12-07 17:40:12
9559
转载 vue上拉加载更多
因为我们项目中，还用了swiper。。。很多都是滑动切换的，但是又得上拉加载，所以导致，很多UI框架，我们用了，都有不同的bug出现，没办法，最后写了一个。代码如下（这个因为很多地方会用，所以建议放在components/common下面）：.loadmore{width:100%;}export default {name:
2017-11-06 15:03:06
3667
原创 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
4798
转载 HTML5页面被运营商进行DNS劫持问题及解决方案，app中h5页面源码的获取
App应用的html5页面经过运营商的移动网络（非wifi网络），被强制插入广告和手机管家的多余信息，在有些场景严重干扰用户的操作，也产生在美丽的页面上加入了不协调的悬浮层。并且这个手机管家类的悬浮层有时间出现，有时间不出现，神出鬼没，虽然你可以通过点击关闭手机手机关键是突然出现，有时候还关闭不了。总之用户不喜欢这种用户不需要的选择，所以干掉它吧！ 在app中h5页面源码，可以通过下面代码获得
2017-09-18 14:40:46
3244
原创 调用微信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
3377
4
转载 拉钩、网易、淘宝移动端rem布局分析（转载非原创）
从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。这是淘宝的github网址，里面有适配所需的js还有说明文档 地址：https://github.com/amfe/lib
2017-08-16 17:47:25
911
原创 表单验证
先来看看html部分姓名:联系方式:参加人数:房间要求:大床房标间套房是否需要酒店提供早餐:是否参加板块选择(可多选):ABC酒店选择:请选择酒店万达皇冠假日酒店万达文华度假酒店敖麓谷雅酒店哈尔滨凯宾斯基酒店香格里拉大酒店(松北)凯莱花园大酒店马迭
2017-07-19 13:37:37
404
转载 20个正则表达式,让js校验不在难
正则表达式，一个十分古老而又强大的文本处理工具，仅仅用一段非常简短的表达式语句，便能够快速实现一个非常复杂的业务逻辑。熟练地掌握正则表达式的话，能够使你的开发效率得到极大的提升。正则表达式经常被用于字段或任意字符串的校验，如下面这段校验基本日期格式的JavaScript代码：var reg = /^(\\d{1,4})(-|\\/)(\\d{1,2})\\2(\\d{1,2})$/; v
2017-07-17 16:12:47
664
转载 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
909
1
转载 移动端布局终极解决方案hotcss
插件描述：hotcss不是一个库，也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。hotcss让移动端布局开发更加容易介绍hotcss不是一个库，也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。使用动态的HTML根字体大小和动态的viewport scale。遵循
2017-06-21 15:51:42
2477
转载 web百度地图API路线规划+导航
#app{overflow: hidden;position:absolute;top:0rem;left:0rem;z-index:99999;width:7.5rem;display: none}#daohang{display:block;padding:3px 5px;border-radius:3px;position:absolute;bottom:0.1rem;right:0.1
2017-06-16 16:44:49
5789
2
原创 wab页面调用百度地图APP导航，IOS10不兼容问题解决方式
wab页面调用百度地图APP的时候，发现一个问题，就是安卓手机正常调起，但IOS10不兼容解决方法是放弃html5浏览器获取经纬度，创建一个百度地图的地理定位对象，来获取百度地图中的经纬度。#app{overflow: hidden;position:absolute;top:0rem;left:0rem;z-index:99999;width:7.5rem;display: none
2017-06-16 16:32:36
2651
原创 解决微信页面中ios音乐不能自动播放问题
document.getElementById('audio').play(); document.addEventListener("WeixinJSBridgeReady", function() { // 音乐自动播放 document.getElementById('audio').play(); }, false);
2017-05-22 14:57:05
3763
原创 滚动条 美观
/* 滚动条 美观 */::-webkit-scrollbar-track {border-radius:0;background:#e1e1e1;position:absolute}::-webkit-scrollbar {width:6px;height:6px;position:absolute}::-webkit-scrollbar-thumb
2017-04-21 12:35:40
441
转载 HTML+CSS+jQuery实现弹幕技术
.barrage .screen{width:100%;height:100%;position:absolute;top:0px;right:0px;}.barrage .screen .s_close{z-index:2;top:20px;right:20px;position:absolute;text-decoration:none;width:40px;height:40px;bor
2017-04-20 17:04:53
5114
原创 微信分享链接时,怎样才能带上带缩略图和简介?
// alert(location.href.split('#')[0]) $(function(){var timestamps;var nonceStrs;var signatures;var url = encodeURIComponent(location.href.split('#')[0]);$.ajax({ async: false, url:
2017-04-17 16:42:50
11980
转载 单选/多选框 美观UI
/* 单选/多选框 美观 */input[type=checkbox], input[type=radio] {-webkit-appearance: none;appearance: none;width: 13px;height: 13px;margin: 0;cursor: pointer;vertical-align: bottom;background
2017-04-14 13:35:31
1945
转载 js图片懒加载（可视区域加载）
图片懒加载(可视区域加载)* {padding: 0px;margin: 0px;}html,body {width: 100%;min-height: 100%;}#SB {margin: 0;padding: 0;list-style: none;}#SB .in {border: 1px solid red;
2017-04-06 16:08:41
2152
转载 jQuery中使用Ajax获取JSON格式数据示例代码
有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJSON()方法实现，下面有个不错的示例，需要的朋友可以参考下JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSONM文件中包含了关于“名称”和“值”的信息。有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJS
2017-04-05 15:08:33
3027
2
原创 纯css雪花飘落特效
html代码：css代码：.snow{width:100%;height:10rem;background: url(../images/snow.png) repeat-y center;z-index: 9999999999;-webkit-animation: snow 9s linear infinite;animation: snow 9s linear infinite
2017-03-27 15:54:53
5196
原创 ios微信h5音频audio无法自动播放问
在微信端开发H5的时候，audio标签在苹果机上无法进行自动播放Media = document.getElementById("music");alert(Media.networkState);// 状态码显示为3，表示Audio没有找到资源路径于是尝试使用js去注入一个路径Media.src = "./assets/sound/music.mp3"; Med
2017-03-22 17:10:22
4657
转载 h5移动端知识要点
第1章 使用rem作为单位html{font-size:10px}1.1、使用媒体查询，不同分辨率设置不同的html的font-size@(min-width:320px){ html{font-size:10px;}}@(min-width:360px){ html{font-size:11.25px;}}@(min-width:400px){ html{font-size:
2017-03-17 11:43:40
882
原创 用JavaScript判断横屏竖屏问题
/判断手机横竖屏状态： function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态！") } if(window.orientation==90||window.orientation==-90){
2017-03-09 13:51:38
1291
原创 移动端web开发，click touch tap区别
一：click与tap比较click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。singleTap 和doubleTap分别代表单次点击和双次点击二：tap的穿透处理使用zepto框架的tap的点击事件，来规避click事件的延迟响应，会出现穿透，即点击会触发非当前层的点击事件。三
2017-02-20 15:21:29
935
原创 获取时间
1.获取当前时间：function getNow(id){var d = new Date();var year = d.getFullYear();var month = d.getMonth() + 1;var date = d.getDate();var hour = d.getHours();var minute = d.getMinutes();var
2017-02-20 10:37:49
302
转载 CSS实现单行、多行文本溢出显示省略号（…）
1、单行文本的溢出overflow: hidden;text-overflow:ellipsis;white-space: nowrap;2、多行文本的溢出display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;适用范围：因使用了WebKit的CSS扩展属性，该方法适...
2017-02-15 11:09:26
4835
原创 手机适配rem
;!function(window){var win=window,doc=win.document,docEle=doc.documentElement,objhtml=doc.getElementsByTagName('html')[0],width=docEle.clientWidth,size='fontSize',html=function(obj,key,v
2017-02-08 11:50:14
480
原创 js获取验证码倒计时效果
div class="div user-input"> input type="number" class="code" placeholder="请输入手机验证码" required maxlength="6"> input type="button" class="obtain generate_code" value=" 获取验证码" onclick="settime(t
2017-02-08 11:46:40
938
转载 如何入门微信小程序开发
最近微信开发小程序挺火的，自己选择了腾讯云官方推出的相册。先下载：破解版IDE下载地址，以及使用说明：http://download.csdn.net/detail/richard_jason/9660819http://download.csdn.net/detail/richard_jason/9660821这里由于csdn有上传大小限制，所以只
2017-01-24 17:09:26
1497
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人