vue mobile terminal / PC common problems and solutions

First, determine phone / PC browser language

navigator.language // returns the language code

　　

Language code documentation:  http://www.lingoes.cn/zh/translator/langcode.htm

Second, get a scroll bar position

// html structure

<template lang="pug">
    div.home-box(@scroll="scorllChangeColor")
<template>　

// methods declared in the method

  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)'
      }
    }
}

Third, back to top

// html structure

<-! Method backTop back to the top -> 
<the Button class = "Go-Top" @ the Click = "backTop"> Top </ button>

　　

// cycle and method

// vue lives of two hooks, not much to explain here. 
// window object, all browsers support the window object. It represents the browser window, listening scroll events 
Mounted () { 
  window.addEventListener ( 'the Scroll', this.scrollToTop) 
}, 
Destroyed () { 
  window.removeEventListener ( 'the Scroll', this.scrollToTop) 
}, 
 
 
Methods: { 
  // click on the image back to the top of the method, add a timer to smooth the transition 
  backTop () { 
      const = the this that 
      the let the timer = setInterval (() => { 
        the let ispeed = Math.floor (-that.scrollTop / 5) 
        document.documentElement = + document.body.scrollTop = that.scrollTop .scrollTop the ispeed 
        IF (that.scrollTop === 0) { 
          the clearInterval (Timer) 
        } 
      }, 16) 
  },
 
  // to calculate the height from the top, the top of the display 60 when the height is greater than the icon back to less than 60 hidden 
  scrollToTop () { 
    const = the this that 
    the let scrollTop window.pageYOffset || = || document.body.scrollTop document.documentElement.scrollTop 
    = scrollTop that.scrollTop 
    IF (that.scrollTop> 60) { 
      that.btnFlag = to true 
    } the else { 
      that.btnFlag to false = 
    } 
  } 
}

Fourth, the pop-up slider penetrating the mask layer

1, by vue "@ touchmove.prevent" instruction

<div 
      class = "IMG-WeChat" 
      @ = the Click "hideWchat" 
       V-IF = "showModal" 
       @ // VUE touchmove.prevent instruction may be added directly 
     > 
    <IMG 
      @ = the Click "hideWchat" 
       the src = "../ Assets /images/home/mp-wechat.jpg " 
        alt 
     /> 
 </ div>

2, through the mask to show or hide the scrolling elements overflow: hidden

// html 结构
    <div :class="show?'home hidden':'home'">
<style>
    .hidden {
         overflow: hidden;
         position: absolute;
         width: 100vw;
         height: 100vh;
</style>

Fifth, international

// Installation

npm install vue-i18n
# OR
yarn add vue-i18n

// create the language pack files

// 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 use

<p class="header-img-intro">{{ $t('home.imgIntro1') }}</p>
<p class="header-img-intro1">{{ $t('home.imgIntro2') }}</p>

Sixth, determine the phone, ipad, computer

/ (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-> phone / ipad

Reference Address: https://www.cnblogs.com/h5c3/p/6542799.html

　　　　　https://www.jianshu.com/p/821c8a10d14f

　　　　　https://blog.csdn.net/qq_36070288/article/details/84765139