![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
H5
三人行,必有我师!!!
三人行,必有我师!!!
展开
-
header实现渐隐渐现效果
使用场景如图:(刚开始是左箭头 ---》 下滑变header透明 ---》 下滑至一定高度,header出现)代码:<template> <div> <router-link tag="div" to="/" class="header-abs" v-show="showAbs"> <div class="iconfont header-abs-back">...原创 2021-03-16 10:07:02 · 211 阅读 · 0 评论 -
网络问题造成,页面抖动
场景:如图当图片没有请求回来的时候,下面的文字在header下面,图片加载完时,又恢复到图片下方。一:高度设置(高度百分比是31.25%。不能直接设置height:31.25%)或者这样写(vw会有浏览器兼容问题)...原创 2021-03-05 14:28:06 · 187 阅读 · 0 评论 -
解决移动端 H5 点击300ms延迟问题
安装fastclick (移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。)一安装:npm install fastclick --save二:使用:在main.js中引入import fastClick from 'fastclick'fastClick.attach(document.body)...原创 2021-03-04 16:28:31 · 825 阅读 · 1 评论 -
移动端H5 1px显示问题
border.css@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topright,.border-bottomleft { position: relative;}.border::before,原创 2021-03-04 16:17:23 · 148 阅读 · 1 评论 -
公用css样式
reset.css@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}body,input,textarea,button,select,pre,xm.原创 2021-03-04 16:16:07 · 396 阅读 · 1 评论 -
数字千分位转换
/** * 将数值四舍五入后格式化. * * @param num 数值(Number或者String) * @param cent 要保留的小数位(Number) * @param isThousand 是否需要千分位 0:不需要,1:需要(数值类型); * @return 格式的字符串,如'1,234,567.45' * @type String */ .原创 2020-09-23 14:20:41 · 1269 阅读 · 0 评论 -
解决input type=number的滚轮事件
<el-inputtype="number"@wheel.native.prevent="stopScrollFun($event)"v-model.number="child.percentage" ></el-input>// 解决谷歌火狐input[type=number]滚动事件 stopScrollFun(evt) { evt = evt || window.event; if(evt.pr...原创 2020-09-18 13:34:50 · 1886 阅读 · 0 评论 -
解决ios内嵌H5,用a标签 href跳转不起作用
问题场景:app内嵌H5,H5使用的vue开发,功能中有一个按钮点击跳转到第三方客服。ios点击打不开,安卓没有问题错误方式:<a href="baidu.com" v-if="contactShow" class="contactPutian" target="_blank" > <img src="@/assets/imgs/loan/putian/tel.png" alt=""> </a> 正确使用click原创 2020-08-27 18:19:43 · 5569 阅读 · 2 评论 -
type =number 在火狐下面的样式问题
type =number 在火狐下面的样式问题 input[type="number"] { -moz-appearance: textfield;}谷歌同理 -webkit-appearance:textfield;原创 2020-08-03 10:00:53 · 266 阅读 · 0 评论 -
js 获取dom元素距离顶部的位置
document.getElementById('filter').getBoundingClientRect().top其他的都是垃圾原创 2020-07-31 10:43:19 · 11339 阅读 · 9 评论 -
H5 PDF预览
<script src="./pdf/pdf.js"></script> <div id="container"> <div class="lightbox"></div> <div id="pop" class="pop"> </div> </div> <script type="text/javascri.原创 2020-07-28 13:45:47 · 328 阅读 · 0 评论 -
iframe嵌套微信公众号文章
<iframe style="min-height:100vh;width:100%;border-width: 0;" id="iFrame" width="100%"></iframe>function getUrl(URL) { let http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); //调用跨域API .原创 2020-07-28 13:42:53 · 3199 阅读 · 5 评论 -
H5页面,判断是在微信浏览器还是小程序 打开
// 判断是否在微信小程序中打开 var ua = window.navigator.userAgent.toLowerCase(); let that = this; if(ua.match(/MicroMessenger/i) == 'micromessenger'){ //判断是否是微信环境 //微信环境下 wx.miniProgram.getEnv(function(res) { .原创 2020-07-22 15:42:33 · 3461 阅读 · 0 评论 -
iframe的那些坑
大坑一:场景,H5嵌套了第三方的页面。第三方页面A跳转到B,B页面有个input file,点击一直没有反应,作用域上移了。经一天的研究发现,是因为我给iframe设置了height:100vh;注意:不要设置height,一定要设置min-height。哭死...原创 2020-07-22 15:39:02 · 490 阅读 · 2 评论 -
H5流式布局
话不多说,直接上代码效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3瀑布流</title> <style> /*大层*/ .container{width:80%;margin: 0 auto;} /*瀑布流层*/ .waterfall{原创 2020-06-23 16:34:18 · 601 阅读 · 0 评论 -
HTML5 progress进度条详解
<progress class="process" value='70' max='100'></progress>.process{background:#F9F9F9;border:1pxsolidred;border:2pxsolid#000;width:200px;height:10px;-webkit-appearance:none;bor...转载 2020-04-16 14:09:14 · 847 阅读 · 0 评论 -
页面设置favicon设置以及动态修改favicon
1,常见设置index.html中设置<link rel="icon" href="http://files.puhuijinfu.com/imgLoader/phjf/img/2020/03/04/rLBLKH6YAaw78iyB14J5.jpeg" type="image/x-icon">2.动态设置getIcon(){ var icon_url=''...原创 2020-03-04 17:38:01 · 3851 阅读 · 0 评论 -
安卓手机,input框被软键盘遮住问题
使用html5的scrollIntoView()方法<input type="text" v-model="ssvalue" id="searSrceen" @click="topScrollInput()">topScrollInput(){ setTimeout(function(){ document.getElementByI...原创 2020-01-18 16:16:51 · 294 阅读 · 0 评论 -
最近在做微信公众号支付功能,iOS正常唤起微信支付并支付成功;android唤不起微信支付,显示失败。
场景:本公司做一个投保活动页面,和第三方公司合作,前端请求接口,后台给返回链接,链接是第三方公司回调给的唤醒页面支付的链接。前端用的iframe 给src赋值,展示微信支付页面。问题:ios手机一点问题没有,正常投保,正常支付。但是,但是,但是,安卓唤醒不了支付页面,一直白屏。中间有个10224报错。一直以为是合作方页面问题,因为把链接换成百度地址,安卓ios都可以正常跳转。但是,但是...转载 2019-11-19 14:44:04 · 1021 阅读 · 0 评论 -
关于 iframe 嵌套 问题
场景:同一页面,为了少写代码。在vue项目中,使用iframe嵌套另一个域名项目下的一个jsp页面,报错问题为:X-Frame-Options 设置为了SAMEORIGIN。原理:X-frame-options响应头。赋值有如下三种:(1)DENY:不能被嵌入到任何iframe或frame中。(2)SAMEORIGIN:页面只能被本站页面嵌入到iframe或者fra...原创 2019-11-12 20:48:43 · 1118 阅读 · 0 评论 -
微信转发或分享朋友圈带缩略图、标题和描述的实现方法
微信转发或分享朋友圈带缩略图、标题和描述的实现方法微信转发或分享朋友圈带缩略图、标题和描述的实现方法原创 2019-01-09 20:35:24 · 15172 阅读 · 3 评论 -
去掉alert的域名
去掉alert的域名移动端,alert的弹框会加上域名,此方法可以去掉域名//去掉alert的域名 (function(){ window.alert = function(name){ var iframe = document.createElement("IFRAME"); iframe.style.displ...原创 2019-02-18 09:59:34 · 3481 阅读 · 0 评论 -
H5判断网络状态
https://blog.csdn.net/ycb1689/article/details/83022750?utm_source=blogxgwz1转载 2019-02-18 13:31:32 · 1767 阅读 · 0 评论 -
vue 动态设置title打包完之后 title乱码
一直以为是vue代码问题,查半天,可笑解决方案:你用记事本打开index.vue看看,打开后“另存为”把“编码”改为“utf8”原创 2019-07-26 16:50:22 · 2193 阅读 · 0 评论 -
vue中用iframe嵌套页面,点击返回实现真正的退回上一步功能
vue项目中需要嵌套第三方的页面,但是第三方页面中的网页没有返回按钮,如图所示:此为页面b,页面a为跳到b页面的前一个页面。点击iframe嵌套页面跳转的第二个页面要实现不管进入多少层iframe页面,点击回退都直接跳到页面a.实现:为了不影响路由判断,使用回退的方法。首先在进入页面b时,记录一下history.length,并把这个值赋给页面的一个变量: data () {...转载 2019-08-13 13:30:39 · 3774 阅读 · 1 评论 -
vue、html与iframe html事件相互调用
二.vue页面中引入的iframe标签1.在vue组件中调用iframe html 中的事件self.$refs.iframe.contentWindow.myfunc()2.在iframe html 中调用vue methods(1).在vue中设置标识id 并将方法暴露在window中export default{ data(){ return...转载 2019-08-13 13:34:43 · 814 阅读 · 0 评论 -
在vue中监听storage的变化
为什么要监听storage的变化?当我们在使用vue的时候,有时候需要一个两个数据在全局共享,vue虽然提供了vuex模块来解决此问题,但是为了一两个数据的共享引入vuex未免小题大做,所以我们选择使用storage来保存共享数据,但有个问题就是如何监听storage的变化,让我们可以在保存数据的同时,在另外一个路由中监听到变化并执行操作本例子就是演示此方法完整示例怎么监听首先在ma...转载 2019-08-27 10:32:43 · 1994 阅读 · 1 评论 -
vue input上传图片,实时预览
1.html<div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @cha...原创 2019-09-19 15:14:33 · 3013 阅读 · 1 评论 -
min-ui 省市区三级联动
直接上代码html <template> <div class="three-level-address" id="three_level_address"> <div class="region-div"> <span class="input-icon"><i class="iconfont icon-d...转载 2019-09-25 15:58:42 · 553 阅读 · 0 评论 -
html 前端oss上传文件
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery1.8.2.min.js"></script> &...原创 2019-09-27 17:50:21 · 2886 阅读 · 0 评论 -
input type = file 在部分安卓手机上无法调起摄像头和相册
移动端H5web 用input type = file 在部分安卓手机上无法调起摄像头拍照,有的也无法访问相册而是直接访问了文档,解决办法是:加上 accept = "image/*" 防止打开是的文档,加上mutiple="mutiple" 可以再打开的时候选择是打开相册还是使用摄像头,一般加这两个属性即可,需要调用摄像头的加上capture="camera"以兼容不同的安卓手机&l...原创 2019-10-10 15:29:03 · 9405 阅读 · 2 评论 -
H5,input输入时,软键盘弹起不能自动收回
H5,input输入时,软键盘弹起不能自动收回(ios,安卓正常) //键盘收起以后页面缩回 $(".form p input").on("blur",function(){ var toFix=$(this).offset().top; window.scroll(0,toFix);//失焦后强制让页面归位 });之前没发现这个问题,这...原创 2019-01-11 10:53:05 · 4344 阅读 · 0 评论