vue 项目中使用 fullpage.js 插件

发表于 更新于 分类于

vue 整屏滚动

安装

1
npm install --save vue-fullpage.js

在 main.js 中引入

1
2
3
import VueFullPage from "vue-fullpage.js/dist/vue-fullpage.min.js";
import "./assets/css/fullpage.css";
Vue.use(VueFullPage);
fullpage.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
/*!
 * fullPage 3.0.5
 * https://github.com/alvarotrigo/fullPage.js
 *
 * @license GPLv3 for open source use only
 * or Fullpage Commercial License for commercial use
 * http://alvarotrigo.com/fullPage/pricing/
 *
 * Copyright (C) 2018 http://alvarotrigo.com/fullPage - A project by Alvaro Trigo
 */
.fp-enabled body,
html.fp-enabled {
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.fp-section {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.fp-slide {
  float: left;
}
.fp-slide,
.fp-slidesContainer {
  height: 100%;
  display: block;
}
.fp-slides {
  z-index: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.fp-section.fp-table,
.fp-slide.fp-table {
  width: 100%;
}
.fp-tableCell {
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
.fp-slidesContainer {
  float: left;
  position: relative;
}
.fp-controlArrow {
  user-select: none;
  position: absolute;
  z-index: 4;
  top: 50%;
  cursor: pointer;
  width: 0;
  height: 0;
  border-style: solid;
  margin-top: -38px;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.fp-controlArrow.fp-prev {
  left: 15px;
  width: 0;
  border-width: 38.5px 34px 38.5px 0;
  border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next {
  right: 15px;
  border-width: 38.5px 0 38.5px 34px;
  border-color: transparent transparent transparent #fff;
}
.fp-scrollable {
  overflow: hidden;
  position: relative;
}
.fp-scroller {
  overflow: hidden;
}
.iScrollIndicator {
  border: 0 !important;
}
.fp-notransition {
  -webkit-transition: none !important;
  transition: none !important;
}
#fp-nav {
  position: fixed;
  z-index: 100;
  margin-top: -32px;
  top: 50%;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
#fp-nav.fp-right {
  right: 17px;
}
#fp-nav.fp-left {
  left: 17px;
}
.fp-slidesNav {
  position: absolute;
  z-index: 4;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  left: 0 !important;
  right: 0;
  margin: 0 auto !important;
}
.fp-slidesNav.fp-bottom {
  bottom: 17px;
}
.fp-slidesNav.fp-top {
  top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li {
  display: block;
  width: 14px;
  position: relative;
  margin: 6px auto;
}
.fp-slidesNav ul li {
  display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a.active span {
  width: 6px;
  height: 24px;
  background: #ffffff;
  border-radius: 3px;
  margin: 0;
  border: 1px solid #f85a00;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  width: 6px;
  height: 6px;
  background: #f85a00;
  border-radius: 3px;
  margin: 0;
  display: block;

  border-radius: 50%;
  z-index: 1;
  border: 0;
  transition: all 0.1s ease-in-out;
}
#fp-nav ul li a .fp-sr-only,
.fp-slidesNav ul li a .fp-sr-only {
  position: absolute;
  width: 6px;
  height: 6px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
}
#fp-nav ul li .fp-tooltip {
  position: absolute;
  top: -2px;
  color: #fff;
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  display: block;
  opacity: 0;
  width: 0;
  cursor: pointer;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  width: auto;
  opacity: 1;
}
#fp-nav ul li .fp-tooltip.fp-right {
  right: 20px;
}
#fp-nav ul li .fp-tooltip.fp-left {
  left: 20px;
}
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell,
.fp-auto-height.fp-section {
  height: auto !important;
}
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell,
.fp-responsive .fp-auto-height-responsive.fp-section {
  height: auto !important;
}

使用

1
2
3
4
5
6
7
<full-page :options="options" ref="fullpage">
  <div class="section" v-for="(item, index) in subComponents" :key="index">
    <component class="section-container" :is="item"></component>

    <!-- <img class="ic-next" src="@/assets/images/icon/ic-next.png" alt /> -->
  </div>
</full-page>

fullpage 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
options = {
  licenseKey: null,
  // 绑定菜单，设定相关属性和anchors的值对应后，菜单可以控制幻灯片滚动
  menu: ".nav",
  // 定义锚链接，用户可以快速打开定位到某一页面；不需要加"#"，不要和页面中任意的id和name相同
  anchors: ["page1", "page2", "page3"],
  // 每一页幻灯片的内容是否垂直居中
  verticalCentered: false,
  // 用来控制slide幻灯片的箭头，设置为false，两侧的箭头会消失
  controlArrows: false,
  // 横向slide幻灯片是否循环滚动
  loopHorizontal: false,
  // 是否包含滚动条，设为true，则浏览器自带的滚动条会出现，页面还是按页滚动，但是浏览器滚动条默认行为也有效
  scrollBar: true,
  // （默认null）如果要在滚动某些元素时避免自动滚动，则这是您需要使用的选项
  normalScrollElements: "#element1, .element2",
  // 为每个section设置背景色
  sectionsColor: ["#f00", "#0f0", "#00f"],
  // 字体是否随着窗口缩放而缩放
  resize: true,
  // 页面滚动速度
  scrollingSpeed: 700,
  // 是否锁定锚链接
  lockAnchors: true,
  // 定义section页面的滚动方式，需要引入jquery.easings插件
  easing: "easeInOutCubic",
  // 是否使用css3 transform来实现滚动效果
  css3: false,
  // 滚动到最顶部后是否连续滚动到底部
  loopTop: true,
  // 滚动到最底部后是否连续滚动到顶部
  loopBottom: true,
  // 是否循环滚动，默认为false。如果设置为true，则页面会循环滚动，而不像loopTop或loopBottom那样出现跳动，效果很平滑，注意这个属性和loopTop、loopBottom不兼容和，不要同时设置
  continuousVertical: true,
  // 是否使用插件滚动方式，设为false后，会出现浏览器自带的滚动条，将不会按页滚动
  autoScrolling: false,
  // 设置每个section顶部的padding，当我们要设置一个固定在顶部的菜单、导航、元素等时使用
  paddingTop: "100px",
  // 设置每个section底部的padding，当我们要设置一个固定在底部的菜单、导航、元素等时使用
  paddingBottom: "100px",
  // 固定的元素，为jquery选择器；可用于顶部导航等
  fixedElements: ".nav",
  // 是否可以使用键盘方向键导航，默认为true
  keyboardScrolling: false,
  // 在移动设置中页面敏感性，最大为100，越大越难滑动
  touchSensitivity: 5,
  // 设为false，则通过锚链接定位到某个页面不再有动画效果
  animateAnchor: false,
  // 是否记录历史，可以通过浏览器的前进后退来导航
  recordHistory: true,
  // 是否显示导航，默认为false，设为true会显示小圆点作为导航
  navigation: true,
  // 导航小圆点的位置，可以设置为left或者right
  navigationPosition: "right",
  // 鼠标移动到小圆点上时显示出的提示信息
  navigationTooltips: ["第一页", "第二页", "第三页"],
  // 是否显示当前页面小圆点导航的提示信息，不需要鼠标移上
  showActiveTooltip: true,
  // 是否显示横向幻灯片的导航
  slidesNavigation: true,
  // 横向幻灯片导航的位置，可以为top或者bottom
  slidesNavPosition: "bottom",
  // 内容超过满屏时是否显示滚动条，需要jquery.slimscroll插件
  scrollOverflow: true,
  // section选择器
  sectionSelector: ".section",
  // slide选择器
  slideSelector: ".slide"
  // afterLoad: this.afterLoad,
};

vue 调用 fullpapge 的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
this.$refs.fullpage.api.moveSectionDown();
this.$refs.fullpage.init();

moveSectionUp(); // 向上滚动一页
moveSectionDown(); // 向下滚动一页
moveTo(wection, slide); // 滚动到第几页，第几个幻灯片；页面从 1 计算，幻灯片从 0 计算
silentMoveTo(section, slide); // 和 moveTo 一样，但是没有动画效果
moveSlideRight(); // 幻灯片向右滚动
moveSlideLeft(); // 幻灯片向左滚动
setAutoScrolling(boolean); // 动态设置 autoScrolling 配置项
setLockAnchors(boolean); // 动态设置 lockAnchors 配置项
setRecordHistory(boolean); // 动态设置 recordHistory 配置项
setScrollingSpeed(milliseconds); // 动态设置 scrollingSpeed 配置项
setAllowScrolling(boolean, [directions]); // 添加或删除鼠标/滑动控制，第一个参数为启用、禁用；第二个参数为方向，取值包含 all、up、dowm、left、right，可以使用多个，逗号分隔
destroy(type); // 销毁 fullpage 特效，不写 type，fullpage 给页面添加的样式和 html 元素还在；如果使用 all，则样式和 html 等全部被销毁
reBuild(); // 重新更新页面和尺寸，用于通过 ajax 请求后改变了页面结构之后，重建效