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
