一, 判断手机 / 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 的两个生命钩子, 这里不多解释.
- // Windows 对象, 所有浏览器都支持 Windows 对象. 它表示浏览器窗口, 监听滚动事件
- mounted () {
- Windows.addEventListener('scroll', this.scrollToTop)
- },
- destroyed () {
- Windows.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 = Windows.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://www.cnblogs.com/detanx/p/vueProblem.html