vue 移动端/PC常见问题及解决方法

一、判断手机/PC浏览器语言

navigator.language // 返回语言代码

二、获取滚动条位置

// html结构

<template lang="pug">     div.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>

五、国际化

// 安装

1	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

 

参考地址：js获取手机系统语言 - h5c3 - 博客园

　　　　　vue获取滚动条位置 - 简书

　　　　　vue中实现回到顶部功能_宝贝QY的博客-CSDN博客_vue返回顶部