【VUE中實現錨點的平滑滾動 + VUE 全屏滾動】

需求：點擊TAB,可以實現板塊的快速定位，平滑滾動，

起初思路把買個TAB對應的頁面當成單獨的頁面，所以方向錯了，成了不同頁面間的跳轉，其實應該是一個頁面中有不同的組件，每個組件占一屏，點擊TAB錨點定位

1.錨點的平滑滾動--------------------------------

1.效果

圖片質量差，湊活看吧，不知道怎么只播放一次

 

 

2.最外層：layout組件

header為頭部導航TAB

transition包裹了router-view，用於給不同頁面之間的跳轉加動效

<template>
    <div class="layout">
        <Header
            @routerEvent="layoutEvent"
            :changeActive="changeActive"
        ></Header>
        <transition
            mode="out-in"
            :enter-active-class="enterClass" 
            :leave-active-class="leaveClass">
            <router-view></router-view>
        </transition>
        <!-- <Footer></Footer> -->
    </div>
</template>

3.頭部導航：Header組件

span為Tab，添加點擊事件，向父組件layout中emit出去

<template>
    <div class="header" :class="{'teshu': changeActive===0}">
        <div class="header_tabBox">
            <img src="../../assets/img/logo.png" alt="">
            <span
             v-for="(item, idx) in tabList" :key="idx" 
             :class="{'active': changeActive === idx}"
             @click="routerEvent(item, idx)">{{item.label}}
             </span>
        </div>
    </div>
</template>

    methods: {
        routerEvent(item, idx) {
            const vm = this;
            vm.$emit('routerEvent',item, idx)
        }
    }

 

4.關鍵部分：

在具體頁面部分，將所有組件，包括home, aboutus，service，case，concat，分別對應首頁，關於我們，服務對象，案例，聯系五個部分，引入在一起

因為我們實現的需求看似是不同的頁面跳轉並且可以順滑滾動，實際是一個頁面中錨點的跳轉

在每一個組件的最外層需要加入對應id，比如.scroll-item

<template>
  <div class="outer">
    <div id="home" class="recommendPage scroll-item">
      <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(item, idx) in bannerList" :key="idx">
          <img :src="item.url" alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
    <AboutUs></AboutUs>
    <Service></Service>
    <Case></Case>
    <Concat></Concat>
  </div>

</template>

 

        layoutEvent(item, idx) {
            const vm = this;
            let items  = document.querySelectorAll(".scroll-item");
            for (var i = 0; i < items.length; i++) {
                if (idx === i) {
                        // location.hash = item.name
                    items[i].scrollIntoView({
                      block: "start",//默認跳轉到頂部
                      behavior: "smooth"//滾動的速度
                    });
                }
            }
        }

 2. 全屏滾動

上邊是第一種思路用到錨點，其實還可以用fullpage實現全屏滾動

1.安裝

npm install --save vue-fullpage.js

2.main.js中引入

import Vue from 'vue'

import 'fullpage.js/vendors/scrolloverflow' // Optional. When using scrollOverflow:true

import './fullpage.scrollHorizontally.min' // Optional. When using fullpage extensions

import VueFullPage from 'vue-fullpage.js'   （注意page的P是大寫）

Vue.use(VueFullPage); 

3.HTML結構

ref  id  section都是必須的固定結構

<div>
    <full-page ref="fullpage" :options="options" id="fullpage">
    <div class="section">
      First section ...
    </div>
    <div class="section">
      Second section ...
    </div>
  </full-page>
</div>

 

      options: {
        licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
        scrollOverflow: true,
        scrollBar: false,
        menu: '#menu',
        // anchors: ['homeL', 'aboutUsL', 'serviceL', 'caseL', 'concatL'],
        anchors: ['首頁', '關於我們', '服務對象', '案例展示', '聯系我們'],
      },

 

• anchors：定義錨鏈接，默認值為[]，有了錨鏈接，就可以快速的打開定位到某一頁面，也是我們實現導航欄的關鍵；

比如這個例子中，我本來用的是第一種思路：錨點跳轉+history模式，改用fullpage之后，我的路由中會出現對應的hash

• lockAnchors：是否鎖定錨鏈接，默認為false，如果設定為true，定義的錨鏈接，也就是anchors屬性就沒有效果了；

• menu：綁定菜單，設定相關屬性與anchors的值相對應后，菜單可以控制滾動，默認為false；

• navigation：是否顯示導航，默認為false，如果設置為true，會顯示小圓點，作為導航；

• navigationPostion：導航小圓點的位置，可以設置為left或right；

• navigationTooltips：導航小圓點的tooltips的設置，默認為[]，注意按照順序設置。