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

一、判断手机/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