一、導(dǎo)航條吸頂效果

需求：官網(wǎng)內(nèi)部有個水平導(dǎo)航條，當(dāng)向下滑動到導(dǎo)航條置頂時需要固定在頂部。
實(shí)現(xiàn)方法：

<template>
  <header ref="boxFixed" :class="{'is_fixed' : isFixed}">
    <section class="header-box">
       <img src="./src/logo2.png" alt="">
         <nav>
             <ul>
                <li>首頁</li>
                <li>產(chǎn)品介紹</li>
                <li>APP下載</li>
                <li>免費(fèi)注冊使用</li>
             </ul>
        </nav>
    </section>
  </header>
</template>
<script>
 export default {
    data(){
      return {
        isFixed: false,
        offsetTop:0
      }
    },
    mounted(){
      window.addEventListener('scroll',this.handleScroll);
      this.$nextTick( () => {
        this.offsetTop = this.$refs.boxFixed.offsetTop;
      })
    },
    methods:{
      handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        this.isFixed = scrollTop > this.offsetTop ? true : false;
      },
    },
    destroyed () {
      window.removeEventListener('scroll', this.handleScroll)
    },
  }
</script>
<style>
.isFixed {
position:fixed;
top:0;
left:0;
z-index:2;
}
</style>

二、平滑效果

需求：在切換導(dǎo)航tab時需要將頁面平滑置頂?shù)匠跏嘉恢谩?br> 實(shí)現(xiàn)方法：
（1）滾動容器或者滾動的父容器設(shè)置固定高度

// 這里是外層滾輪父容器或者滾動容器自身的指定高度
height: calc(100vh - 50px); 
overflow: auto;  // 若是設(shè)定父容器高度，則滾動屬性設(shè)置到要滾動的容器上

（2）設(shè)置滾動容器的scrollTo方法

// 切換tab
   handleTab (index) {
     this.currentIndex = index
     window.scrollTo({
       top: 0,
       behavior: 'smooth'
     })
   },

• scrollTo有兩種語法：

// 1.scrollTo(x,y)   //指定滾動到x軸和y軸的位置
// 2.scrollTo(options)  //options有三個參數(shù)，（left,top,behavior ）,
// top 等同于  y-coord
// left 等同于  x-coord
// behavior  類型String,表示滾動行為,支持參數(shù) smooth(平滑滾動),instant(瞬間滾動),默認(rèn)值auto,實(shí)測效果等同于instant
  window.scrollTo({
       top: 0,
       behavior: "smooth"
  });

三、去掉vue路由地址中的#/以及重定向

需求：去掉vue路由地址中的#/,問題是部署之后頁面無法顯示
實(shí)現(xiàn)方法：利用路由重定向

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

import Index from '@/views/index.vue'

Vue.use(Router)

export default new Router({
 base: '/conferenceportal',    // 設(shè)置base屬性
 mode: 'history',      // 去掉#號
 routes: [
   {
     path: '/',
     name: 'index',
     component: Index
   }
 ]
})

// App.vue
<script>
export default {
 name: 'App',
 created () {
   this.$router.push('/')   // 重定向到首頁
 }
}

四、解決vue中錨點(diǎn)問題

需求：點(diǎn)擊側(cè)邊導(dǎo)航欄是要跳到對應(yīng)的內(nèi)容區(qū)
實(shí)現(xiàn)方法：如果使用a標(biāo)簽的href屬性結(jié)合id可以實(shí)現(xiàn)功能，但是會出現(xiàn)頁面路由被改變的問題，所以此處使用click事件結(jié)合scrollIntoView事件解決問題：

<ul class="slide" v-show="index===0">
     <li v-for="(item,index) in slideList" :key="index" :class="{checkedslide: slideIndex === index}" @click="handleSlide(index)">
       {{ item }}
     </li>
  </ul>
  <div class="card">
      <p class="title" ref="one">Rmeet會議</p>
      .....
 </div>
 <div class="card">
      <p class="title" ref="two">視頻會議室</p>
      .....
 </div>
 <div class="card">
      <p class="title" ref="three">融合會議</p>
      .....
 </div>

export default {
  data () {
    return {
      slideIndex: 0,
      slideList: ['Rmeet會議', '視頻會議室', '融合會議']
    }
  },
methods: {
    // 切換側(cè)邊欄
    handleSlide (index) {
      this.slideIndex = index
      if (index === 0) {
        this.$refs.one.scrollIntoView(true)
      }
      if (index === 1) {
        this.$refs.two.scrollIntoView(true)
      }
      if (index === 2) {
        this.$refs.three.scrollIntoView(true)
      }
    }
  }

五、vue移動端實(shí)現(xiàn)撥號功能（點(diǎn)擊手機(jī)號就撥號）

• 1. 在vue項(xiàng)目的index.html中添加如下代碼：

<meta name="format-detection" content="telephone=yes" />

• 2. 在需要調(diào)起手機(jī)撥號功能的頁面，寫如下方法：

callPhone (phoneNumber) {
    window.location.href = 'tel://' + phoneNumber
}

• 3. 在撥號的頁面調(diào)用此方法:

// Phone是請求得到的數(shù)據(jù)
<span @click="callPhone(Phone)">{{ Phone }}</span>     

六、html添加網(wǎng)頁標(biāo)題

在網(wǎng)頁標(biāo)題左側(cè)顯示：<link rel="icon" href="圖標(biāo)地址" type="image/x-icon">
在收藏夾顯示圖標(biāo)：<link rel="shortcut icon" href="圖標(biāo)地址" type="image/x-icon">