
h5
刹那烟火//
人间值得,未来可期。
展开
-
高德,百度地图获取省市区
近期,遇到一个根据定位获取省市区的需求,前期用了加载百度地图js的方式,经过实验,https在部分ios手机上都获取不到省市区。后来发现是百度地图API中getCurrentPosition方法提示错误。现在的解决方案:先获取H5经纬度,获取到后调用高德地图接口的方式获取,如果失败,再去请求百度地图服务端api的方式。如果经纬度获取失败,则尝试加载高德地图js的方式。把它封装起来:...原创 2020-10-12 10:52:43 · 1829 阅读 · 0 评论 -
Vue.directive自定义指令改变颜色
最好在全局写,这样都会生效,或者当前页面,必须引入import Vue from ‘vue’Vue.directive('rest-styleBackground', function(dom, definition) { //背景颜色 dom.style.background = definition.value})<template> <div> ...原创 2019-12-27 10:17:54 · 1699 阅读 · 0 评论 -
获取地址栏参数
1.获取地址栏参数 getParamsUrl(name) { let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); if (window.location.hash.indexOf("?") < 0) { return null; } ...原创 2019-08-16 10:41:24 · 266 阅读 · 0 评论 -
前端页面列表循环的图片加载不出来
在列表循环数据时,有时候用img标签动态加载图片,有时候资源不会那么快加载出来后来换了一种方式,已背景的形式加载。 <span class="bianImage" :style="{backgroundImage:'url('+item.logo+')'}"></span>...原创 2019-08-15 10:36:30 · 1354 阅读 · 0 评论 -
vue点击按钮打开新页签,并传参
今天遇到一个新需求,需要打开新页签展示,之前用ruter.push都不管用,现在结合window.open和$router.resolve亲测有效以下附上代码:<div class="target" @click="ceshi" ref="target">测试</div>ceshi() { let routeData = this.$router.re...原创 2019-07-17 15:50:15 · 7690 阅读 · 1 评论 -
h5唤醒app
首先,需要判断是安卓还是ios,我们是无法知道是否打开app的,只能通过延迟的方法 var ua = window.navigator.userAgent; var isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (!isiOS) { var t = Date.now(); //...原创 2019-07-16 17:02:36 · 171 阅读 · 0 评论 -
渲染从后台获取到的整个HTML页面
场景:后台返回整个动态的html页面,前端通过获取渲染出来,进行转义解析实现方式:通过接口获取返回的html的数据,document.getElementById(“container”).innerHTML = this.decodeUnicode(接口返回的数据);js方法decodeUnicode(str) { str = str.replace(/\\/g, "%");...原创 2019-07-16 10:52:10 · 12678 阅读 · 2 评论 -
移动端click事件会有300ms延迟
解决移动端300ms的延迟问题产生问题的原因: 移动端的双击会缩放导致click判断延迟浏览器为什么会设置300ms的延迟呢,这个跟双击缩放有关,浏览器捕获第一次单击后,会先等待一段时间,如果在这段时间区间里用户未进行下一次点击,则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作,则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。解决方式:1。css touc...原创 2019-07-16 10:38:06 · 309 阅读 · 0 评论 -
h5单页面移动端PC端的适配问题
把script引入html页面`` <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', ...转载 2019-07-08 11:56:31 · 2887 阅读 · 1 评论 -
移动端h5单页面背景占满全屏
<div class="ceshi"></div><style lang="scss">.ceshi{ max-width: 375px; //按一倍图适配 overflow: hidden; height: 100%; position: absolute; left: 0px; width: 100%; top: 50%;...原创 2019-06-06 14:33:44 · 9948 阅读 · 8 评论