vue 移動端/PC常見問題及解決方法
- 2019 年 10 月 3 日
- 筆記
一、判斷手機/PC瀏覽器語言
navigator.language // 返回語言代碼
語言代碼文檔： http://www.lingoes.cn/zh/translator/langcode.htm
二、獲取滾動條位置
// html結構
<template lang="pug"> div.home-box(@scroll="scorllChangeColor") <template>
// methods中聲明方法
methods: { scorllChangeColor(event) { if( this.scrollTopFlag && event.target.scrollTop > 560) { this.scrollTopFlag = false this.scrollBtmFlag = true document.querySelector('.home-topbar').style.backgroundColor = '#1D0A60' }else if(this.scrollBtmFlag && event.target.scrollTop < 560) { this.scrollTopFlag = true this.scrollBtmFlag = false document.querySelector('.home-topbar').style.backgroundColor = 'rgba(0, 0, 0, 0.3)' } } }
三、回到頂部
// html結構
<!-- backTop 回頂部的方法 --> <button class="go-top" @click="backTop">回到頂部</button>
// 周期及方法
// vue的兩個生命鉤子，這裡不多解釋。 // window對象，所有瀏覽器都支持window對象。它表示瀏覽器窗口，監聽滾動事件 mounted () { window.addEventListener('scroll', this.scrollToTop) }, destroyed () { window.removeEventListener('scroll', this.scrollToTop) }, methods: { // 點擊圖片回到頂部方法，加計時器是為了過渡順滑 backTop () { const that = this let timer = setInterval(() => { let ispeed = Math.floor(-that.scrollTop / 5) document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed if (that.scrollTop === 0) { clearInterval(timer) } }, 16) }, // 為了計算距離頂部的高度，當高度大於60顯示回頂部圖標，小於60則隱藏 scrollToTop () { const that = this let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop that.scrollTop = scrollTop if (that.scrollTop > 60) { that.btnFlag = true } else { that.btnFlag = false } } }
四、彈出層遮罩滑動穿透
1、通過vue “@touchmove.prevent”指令
<div class="wechat-img" @click="hideWchat" v-if="showModal" @touchmove.prevent // vue中可以直接添加指令 > <img @click="hideWchat" src="../assets/images/home/mp-wechat.jpg" alt /> </div>
2、通過遮罩的顯示或隱藏設置滾動元素的overflow: hidden
// html 結構 <div :class="show?'home hidden':'home'"> <style> .hidden { overflow: hidden; position: absolute; width: 100vw; height: 100vh; </style>
五、國際化
// 安裝
npm install vue-i18n # OR yarn add vue-i18n
// 創建語言包文件
// main.js
import Vue from 'vue' import App from './App.vue' import VueI18n from 'vue-i18n' import router from './router' import store from './store' import { zh } from './common/lang/zh' import { en } from './common/lang/en' Vue.use(VueI18n) // 通過插件的形式掛載 const i18n = new VueI18n({ locale: 'zh-CN', // 語言標識 //this.$i18n.locale // 通過切換locale的值來實現語言切換 messages: { 'zh-CN': zh, // 中文語言包 'en-US': en // 英文語言包 } }) Vue.config.productionTip = false new Vue({ router, i18n, // 掛載 store, render: h => h(App) }).$mount('#app')
// html 中使用
<p class="header-img-intro">{{ $t('home.imgIntro1') }}</p> <p class="header-img-intro1">{{ $t('home.imgIntro2') }}</p>
六、判斷手機、ipad、電腦
/(iphone|ipod|ipad|ipad|Android|nokia|blackberry|bada|lg|ucweb|skyfire|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile)/i.test(navigator.userAgent) // true->手機/ipad
參考地址：https://www.cnblogs.com/h5c3/p/6542799.html
https://www.jianshu.com/p/821c8a10d14f
https://blog.csdn.net/qq_36070288/article/details/84765139
