内容简介:ios其实可以用0.5px,but安卓不支持,so只能忍痛割爱
// 点击返回的时候,路由拦截,并将单前页面的路由保留下来 beforeRouteLeave(to, from, next) { let self = this; if (to.name === "SeckillDetail" && self.countDown != "00:00:00") { this.selfNext = next //将next保留下来 self.skipParams = { name: "SeckillDetail", query: to.query, fullPath: to.fullPath }; self.currentParams = { name: from.name, query: from.query }; self.dialogVisableBack = true; } else { next(); } }, //点击弹窗的确认按钮 backSkip() { let _this = this; this.dialogVisableBack = false; this.showToast("订单锁定时长五分钟,可前往我的秒杀支付订单或取消订单"); setTimeout(()=>{ this.dialogVisableBack = false; (this.selfNext)() //通过next跳转,通过push和location.href跳转无效 },2000) }, //点击弹窗的取消按钮,将拦截路由时保留的 cancelBack() { this.dialogVisableBack = false; location.href = "main#/comfirm-order?orderId=" + this.currentParams.query.orderId + "&itemId=" + this.currentParams.query.itemId + "&projectId=" + this.currentParams.query.projectId + "&seckillId=" + this.currentParams.query.seckillId; }, 复制代码
场景2:1px的border
ios其实可以用0.5px,but安卓不支持,so只能忍痛割爱
& .line { width: 236px; float: right; height: 1px; margin: 11px 0px; position: relative; border: none; &:after { content: ""; position: absolute; bottom: 0; background: #ccc; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } } 复制代码
场景3:vue项目加入百度统计
router.afterEach( ( to, from, next ) => { setTimeout(()=>{ var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "这里是你的地址"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); },0); }); 复制代码
场景4:app端h5的title只能识别一次的问题
// main.js import { setMetaTitle } from './js/utils.js' Vue.directive('title', { inserted: function (el, binding) { setMetaTitle(binding.value) } }) 复制代码
// utils.js export function setMetaTitle(title) { document.title = title let mobile = navigator.userAgent.toLowerCase() if (/iphone|ipad|ipod/.test(mobile)) { let iframe = document.createElement('iframe') iframe.style.display = 'none' // 替换成站标favicon路径或者任意存在的较小的图片即可 iframe.setAttribute('src', 'static/img/blank.png') let iframeCallback = function () { setTimeout(function () { iframe.removeEventListener('load', iframeCallback) document.body.removeChild(iframe) }, 0) } iframe.addEventListener('load', iframeCallback) document.body.appendChild(iframe) } } 复制代码
// 需要设置title的页面中 <h2 v-title="'确认订单'"></h2> 复制代码
场景5:微信端定时器息屏暂停的问题(微信亲测有效,app端无解T.T)
// 带有定时器的页面 mounted() { this.getData();//页面数据请求方法 document.addEventListener("visibilitychange", _self.checkViChangeTotal); }, method:{ checkViChangeTotal() { if (!document.hidden) { // 利用h5中hidden这个属性,如果页面由息屏打开,重新请求 this.getData(); } }, } 复制代码
场景6:vue路由频繁切换的时候,会有部分白屏问题,下拉后恢复正常
mounted() { this.setPosition(); }, method:{ setPosition() { var oTop = $(".page-center").offset().top; //获取导航栏的高度,此高度用于保证内容的平滑过渡 var martop = $('.page-center').outerHeight(); var sTop = 0; // 监听页面的滚动 $(window).scroll(function () { // 获取页面向上滚动的距离 sTop = $(this).scrollTop(); // 当导航栏到达屏幕顶端 if (sTop >= oTop) { // 修改导航栏position属性,使之固定在屏幕顶端 $(".page-center").css({ "position": "fixed", "top": "0" }); // 修改内容的margin-top值,保证平滑过渡 $(".page-bottom").css({ "margin-top": martop }); } else { // 当导航栏脱离屏幕顶端时,回复原来的属性 $(".page-center").css({ "position": "static" }); $(".page-bottom").css({ "margin-top": "0" }); } }); }, } 复制代码
场景7:iphoenX适配问题
// dom部分 <div class="adapt"></div> 复制代码
// css部分,利用media做你想要的适配,我这里通过一个白色div留出安全距离防挡 @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .adapt { position: fixed; bottom: 0; width: 100%; height: 34px; background: #fff; } } 复制代码
场景8:通过一个属性改变select下拉角标的样式
//dom部分 <div class="item" style="padding:0px;"> <span class="card_info"> <select id="cardType" v-model="orderData.card_type" :disabled="!orderData.is_update"> <option value="">请选择证件类型</option> <option value="大陆身份证">大陆身份证</option> <option value="军官证">军官证</option> <option value="护照">护照</option> <option value="港澳台身份证">港澳台身份证</option> </select> <i class="tran" v-if="orderData.is_update"><img src="../assets/arrow.png"/></i> </span> <input placeholder="请输入证件号" id="cardNum" v-model="orderData.card_num" :readonly="!orderData.is_update" style="padding:18px 0px;min-width:170px"> </div> 复制代码
//核心css .tran { width: 15px; height: 15px; display: inline-block; vertical-align: middle; pointer-events: none;//点击穿透 margin-left: -22px;//让下标能覆盖到select上面 position: relative; img { width: 100%; height: 100%; vertical-align: middle; } } 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入体验Java Web开发内幕
张孝祥 / 电子工业出版社 / 2007-12 / 55.00元
《深入体验Java Web开发内幕:高级特性》是《深入体验Java Web开发内幕——核心基础》的姊妹篇,Java Web开发的初学者在阅读《深入体验Java Web开发内幕:高级特性》前,应该先学习《深入体验Java Web开发内幕——核心基础》。《深入体验Java Web开发内幕:高级特性》详细阐述了Java Web应用开发中的各种高级特性——Apache文件上传组件的源码分析及应用和编写原理......一起来看看 《深入体验Java Web开发内幕》 这本书的介绍吧!