|
抽屜似彈層，頁面跳轉(zhuǎn)右側(cè)滑入左側(cè)滑出過渡效果，在ios上用戶不通過點擊頂部自帶返回，而是側(cè)滑手機返回時過渡效果出現(xiàn)兩次效果很不友好！
頁面跳轉(zhuǎn)過渡效果解決方案
vuex
isIosMoveBack: false, // 判斷過度動畫取消的時機
過渡頁
export default {
data () {
return {
transitionName: 'slide-left' // 活動動畫
}
},
computed: {
// 返回是否過度取消機制狀態(tài)
isIosMoveBack() { return this.$store.getters.getIsIosMoveBack },
},
mounted() {
// 判斷機型（IOS時返回true)
if (this.isIOS()){
// 監(jiān)聽到滑動事件時設(shè)為true
document.body.addEventListener('touchmove', () => {
// vuex 存儲的狀態(tài)
this.$store.commit('setIsIosMoveBack', true)
}, false)
}
},
methods: {
// 是否ios
isIOS(){
var u = navigator.userAgent; //獲取到的是個字符串，包括很多信息，我只匹配我想要的信息
return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判斷是蘋果手機
},
},
// 在當前路由改變，但是該組件被復用時調(diào)用
beforeRouteUpdate (to, from, next) {
// 路由過渡動畫的監(jiān)聽判斷
if(this.isIosMoveBack){
// 清除過渡效果
this.transitionName = ''
// 順便重置監(jiān)聽狀態(tài)
this.$store.commit('setIsIosMoveBack', false)
}else{
// 加上過渡效果
this.transitionName = 'slide-right'
}
}
}
頁面抽屜彈層解決方案
vuex
duration: 0.3, // 動畫時長
App.vue
created () {
// 監(jiān)聽ios是否滑動
window.addEventListener('touchmove', () => {
// 是否ios
if(this.onWay.isIOS()){
// 是抽屜動畫時長設(shè)為0
this.$store.state.duration = 0
// 滑動應(yīng)該也很快1秒后再初始(能監(jiān)聽到滑動完就別用定時器初始)
setTimeout(()=>{
this.$store.state.duration = 0.3
},1000)
}
}, false)
}
注意：每個有抽屜彈層頁面（以vant彈層示范）
computed:{
// 動態(tài)拿到vuex動畫時長
duration(){ return this.$store.state.duration }
},
有更好解決方案的朋友都在評論區(qū)說說吧
|