【VUE中实现锚点的平滑滚动 + VUE 全屏滚动】

目录

A.锚点的平滑滚动--------------------------------

1.效果

2.最外层：layout组件

3.头部导航：Header组件

4.关键部分：

 B. 全屏滚动

1.安装

2.main.js中引入 

3.HTML结构

---

---

需求：点击TAB,可以实现板块的快速定位，平滑滚动，

起初思路把买个TAB对应的页面当成单独的页面，所以方向错了，成了不同页面间的跳转，其实应该是一个页面中有不同的组件，每个组件占一屏，点击TAB锚点定位

A.锚点的平滑滚动--------------------------------

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>

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"//滚动的速度
                    });
                }
            }
        }

 B. 全屏滚动

上边是第一种思路用到锚点，其实还可以用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>

 可配置选项：

• anchors：定义锚链接，默认值为[]，有了锚链接，就可以快速的打开定位到某一页面，也是我们实现导航栏的关键；

比如这个例子中，我本来用的是第一种思路：锚点跳转+history模式，改用fullpage之后，我的路由中会出现对应的hash

 

• lockAnchors：是否锁定锚链接，默认为false，如果设定为true，定义的锚链接，也就是anchors属性就没有效果了；

• menu：绑定菜单，设定相关属性与anchors的值相对应后，菜单可以控制滚动，默认为false；

• navigation：是否显示导航，默认为false，如果设置为true，会显示小圆点，作为导航；

• navigationPostion：导航小圆点的位置，可以设置为left或right；

• navigationTooltips：导航小圆点的tooltips的设置，默认为[]，注意按照顺序设置。