場景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;
}
}
複製程式碼