场景1:返回弹窗
需求:页面返回的时候弹窗确认是否返回,确认返回,取消留在当前页面
// 点击返回的时候,路由拦截,并将单前页面的路由保留下来
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项目加入百度统计
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?你的代码";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
复制代码
router.beforeEach((to, from, next) => {
if (to.path) {
_hmt.push(['_trackPageview', '/#' + to.fullPath]);
}
next();
}
复制代码
场景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,最后请app端帮忙监控,当app在开屏的时候调用checkViChangeTotal)
// 带有定时器的页面
mounted() {
this.getData();//页面数据请求方法
document.addEventListener("visibilitychange", _self.checkViChangeTotal);
},
method:{
checkViChangeTotal() {
if (!document.hidden) {
// 利用h5中hidden这个属性,如果页面由息屏打开,重新请求
this.getData();
}
},
},
// 需要提醒的是vue项目中,addEventListener的事件在切换页面之前记得要移除,不然不会自动销毁
beforeDestroy() {
let _this = this;
document.removeEventListener(
"visibilitychange",
_this.checkViChangeTotal
);
}
复制代码
场景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;
}
}
复制代码