# bingo-kiki-fullPage

**Repository Path**: jjtHappy/bingo-kiki-fullPage

## Basic Information

- **Project Name**: bingo-kiki-fullPage
- **Description**: 基于jquery,fullPage实现的一块全屏滚动轻量级vue组件，完全切合jquery.fullPage，如果你使用过该组件，那你可以很简单的上手
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2017-04-26
- **Last Updated**: 2021-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#bingo-kiki-fullPage
![输入图片说明](https://git.oschina.net/uploads/images/2017/0426/135543_2c63dfb5_618906.png "在这里输入图片标题")
![输入图片说明](https://git.oschina.net/uploads/images/2017/0426/135607_100a73ca_618906.gif "在这里输入图片标题")

基于:fullPage.js version v.2.9.4

# 介绍
bingo-kiki-fullPage 是一个使用jquery.fullPage实现的简单，容易使用的全屏滑动vue组件。你能使用他实现一个全屏滑动网站，或者是一个横屏滚动的风景景观

# 依赖
你的项目必须依赖jquery library（最小版本16.0）的支持，所以你得先配置jquery，如果你使用vue-cli提供的手脚架，你可以按如下方式配置
安装jquery

```
npm jquery install --save
```

并修改以下文件

```
build
    --webpack.base.conf.js
```

添加如下代码：

```
module.exports = {
  entry: ...,
  output: ...,
  resolve: ...,
  module: ...,
  //添加以下内容
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ]
}

```

# 安装

```
//使用 npm
npm install bingo-kiki-fullpage
```

# 加载

```
import KiKiFullPage from 'bingo-kiki-fullPage'
Vue.use(KiKiFullPage)
```

# 使用
你只需要使用使用下面标签构建一个全屏滑动控件

```
 <kiki-fullPage>
          <kiki-fullPage-section>应用信息</kiki-fullPage-section>
          <kiki-fullPage-section>web信息</kiki-fullPage-section>
          <kiki-fullPage-section>ios信息</kiki-fullPage-section>
          <kiki-fullPage-section>安卓信息</kiki-fullPage-section>
 </kiki-fullPage>
```

如果你需要展示当前的页面只需要使用

```
active
```

属性


```
<kiki-fullPage-section active anchor="submit_ios">ios信息</kiki-fullPage-section>
```

如果你想使用横向切换分屏，你直接使用

```
<kiki-fullPage-section>
          <kiki-fullPage-slide>分屏1</kiki-fullPage-slide>
          <kiki-fullPage-slide>分屏2</kiki-fullPage-slide>
          <kiki-fullPage-slide>分屏3</kiki-fullPage-slide>
</kiki-fullPage-section>
```

# 定义钩子

你可以使用

```
anchor
```
来定义钩子，方便你使用<a>标签直接定位到具体的屏幕上面去

```
<kiki-fullPage-section anchor="submit_application">应用信息</kiki-fullPage-section>
```

```
//定位
<a href="#submit_application">
    <li>
          <p>应用信息</p>
    </li>
</a>
```

同样的方法你也可以使用在slide上

```
<kiki-fullPage-section anchor="test">
          <kiki-fullPage-slide anchor="123">rwerweeeeee分屏1</kiki-fullPage-slide>
          <kiki-fullPage-slide anchor="456">eeeeeeee分屏2</kiki-fullPage-slide>
          <kiki-fullPage-slide>eeeeee分屏3</kiki-fullPage-slide>
</kiki-fullPage-section>
```
```
//定位
<a href="#test/123">
    <li>
          <p>应用信息</p>
    </li>
</a>
```

如果定位slide 要使用‘/’做分隔符，如果slide没有被钩子声明，那么将会使用坐标0，1，2，3..对slide的钩子做为标志如 #test/0

### 初始化配置


kiki-fullPage 几乎整合fullPage.js配置信息（阉割了菜单配置项），你可以查询对应的配置属性信息，然后在<kiki-fullPage>中配置它，比如想定义屏幕滚动到第一个后，循序滚动到最后一个你可以通过配置属性


```
loopTop
```

属性
如下：

```
      <kiki-fullPage :loopTop="true">

```

如果不需要用到一些高级配置，你可以不必写，因为该组件提供了默认配置

# 回调函数

kiki-fullPage 完全整合fullPage.js的回调函数，你可以查询对应的回调函数信息，然后在<kiki-fullPage>中配置它，比如想定义滚动前的回调函数，你可以通过绑定

```
onLeave
```

方法，便可以实现回调
如下：

```
<kiki-fullPage :loopTop="true" @onLeave="onLeave">
```

更多信息请查阅下面api

# api

## kiki-fullPage-slide

### props

#### anchor
定义导航的锚文本信息例如（#example），每个导航文本之前用英文逗号（,）分隔，快速导航的锚文本URL也是使用的这个文本，浏览器通过此锚文本链接可以支持前进和后退按钮功能。

此选项的设置还可以作为用户的书签，当用户打开带有锚文本的URL时，Fullpage可以自动跳转到对应的section屏幕或者slide幻灯片位置。

注意，如果你使用了此选项，那么网页中不能有相同的ID，一来Fullpage插件无法准确的定位到section屏幕或者slide幻灯片位置，二来这也有悖网页中CSS的编写规范

## kiki-fullPage-section

### props

#### anchor
定义导航的锚文本信息例如（#example），每个导航文本之前用英文逗号（,）分隔，快速导航的锚文本URL也是使用的这个文本，浏览器通过此锚文本链接可以支持前进和后退按钮功能。

此选项的设置还可以作为用户的书签，当用户打开带有锚文本的URL时，Fullpage可以自动跳转到对应的section屏幕或者slide幻灯片位置。

注意，如果你使用了此选项，那么网页中不能有相同的ID，一来Fullpage插件无法准确的定位到section屏幕或者slide幻灯片位置，二来这也有悖网页中CSS的编写规范


#### active
定义当前显示的section

## kiki-fullPage

### props
#### controlArrows
默认值：true，决定是否使用控制箭头向左或向右移动幻灯片。

#### verticalCentered
默认值：true，决定是否初始化后，是否垂直居中网页的内容，如果你想自定义元素的位置，那么你可以设置为false，在插件初始化后调用afterrender回调函数加载其它的脚本库设置你网页的内容。

#### resize
默认值：true，是否在窗口改变大小后，自动调整网页中字体的大小。

#### scrollingSpeed
默认值：700，每个屏幕滚动动画执行的时间，时间的单位为毫秒（ms）。

#### sectionsColor
默认值：none，定义每个section的CSS背景演示，例如下面的代码：


 ```
 sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],

```

如果设置的参数不对称，比如屏幕个数多余设置的颜色个数，那么多余的屏幕默认没有背景颜色，如果屏幕个数少于设置的颜色个数，那么多余的颜色将不显示。



#### easing
默认值：easeInOutCubic，定义了用于垂直和水平滚动的过渡效果，它要求文件vendors/jquery.easings.min.js或者jQuery UI插件，具体的动画效果你可以参考 easings插件介绍 ，你也可以使用其它的动画插件库。

#### easingcss3
默认值：ease，定义在滚动屏幕中使用css3:true设置的过度效果，你可以使用 CSS3 transition-timing-function 属性 自定义多个动画效果，例如：linear、ease-out、……，或者使用cubic-bezier方法创建自定义的动画效果，你可能想要使用 Matthew Lein CSS Easing Animation Tool 创建这个。

#### loopTop
默认值：false，定义屏幕滚动到第一个后，是否循序滚动到最后一个。

#### loopBottom
默认值：false，定义屏幕滚动到最后一个后，是否循环滚动到第一个。

#### loopHorizontal
默认值：true，定义水平的幻灯片是否循环切换。

#### css3
默认值：true，确定是否使用JavaScript和CSS3转换滚动在切片和幻灯片。加快平板电脑和移动设备的浏览器支持CSS3的运动有益。如果此选项设置为true，浏览器不支持CSS3，jQuery回调函数将被替代。

#### autoScrolling
默认值：true，定义屏幕是否自动滚动，还是需要用户触发事件滚动，它也影响了部分适合在平板电脑和手机浏览器/设备窗口。

#### fitToSection
默认值：true，设置是否自适应整个窗口的空间，以某个section的内容为分界线，设置为true时，某个的section将填充到整个页面，否者用户可以停留在网页的任何位置。

#### scrollBar
默认值：false，定义是否使用浏览器默认的滚动条，如果使用浏览器默认的滚动条，autoScrolling配置任然生效，用户也可以自由滚动的网站与滚动条和fullpage.js将适合的部分在屏幕滚动时完成。

#### paddingTop
默认值：0，定义每个section固定的头部留白，例如设置paddingBottom: ’10px’、 paddingBottom: ’10em’、……，在使用固定表头的情况下有用的。

#### fixedElements
默认值：null，定义的某个元素是否在网页的固定位置，元素将被关闭的插件是必要的时候，使用CSS3的选项保持滚动结构固定。它需要对这些元素的jQuery选择器字符串。例如：fixedElements: ‘#element1, .element2’。

#### normalScrollElements
默认值：null，如果你想避免自动滚动，滚动时的一些元素，这是你需要使用的选项。（有用的地图，滚动div等）需要对这些元素的jQuery选择器字符串。例如：normalScrollElements: ‘#element1, .element2’。

#### normalScrollElementTouchThreshold
默认值：5，定义了一个数字，测试HTML标签树的机构，是否在在移动设备上支持触摸事件。

#### keyboardScrolling
默认值：true，定义是否可以通过键盘箭头事件控制section的滚动。

#### touchSensitivity
默认值：5，定义了浏览器窗口的宽度/高度的百分比，多远的触摸滑动可以跳转到下一个section / slide。

#### continuousVertical
默认值：false，定义向下滚动到最后一节是否应该向下滚动到第一个，如果向上滚动的第一部分应该滚动到最后一个。不兼容loopTop和loopBottom选项。

#### animateAnchor
默认值：true，定义当网页的URL中有锚文本的时候，是否帮用户定位到对应的section或者slide。

#### recordHistory
默认值：true，定义是否将网页滚动的的状态纪录到浏览器的历史记录中。

当设置为true时，每一个section/slide滚动的状态将纪录到浏览器的历史纪录中，这样的设置有利于用户方便回退到刚才浏览的内容。
当设置为false时候，用户的浏览路径不会记录到浏览器的历史纪录中，如果要取消这个选项可以使用autoScrolling:false。

#### scrollOverflow
默认值：false，设置当内容超过屏幕的高度的时候，是否裁切多余的内容。

当设置为true时，你的内容将会被自动裁切，可以考虑当afterRender回调函数调用的时候，处理你的内容的多少或者使用其它的插件库合理的处理多余的内容。
当设置为false时，插件不会自动裁切多余的内容，但是剩下没有显示的内容任然不能显示，此时，你可以使用 jquery.slimscroll.min插件来自定义滚动事件，如果要使用这个插件，应该在Fullpage插件之前引入，例如下面的代码：
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

#### responsiveWidth
默认值：0， A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin&#8217;s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser&#8217;s width is less than 900 the plugin will scroll like a normal site.

#### responsiveHeight
默认值：0， A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the plugin&#8217;s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser&#8217;s height is less than 900 the plugin will scroll like a normal site.

### event
#### afterLoad (anchorLink, index)
滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数。

- anchorLink 是锚链接的名称
- index 是section的索引，从1开始计算
在没有设置锚文本的情况下，只有使用唯一的index参数。

```
//这是对应的钩子
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage']

	afterLoad(anchorLink, index){
		var loadedSection = $(this);
		//using index
		if(index == 3){
			alert("Section 3 ended loading");
		}
		//using anchorLink
		if(anchorLink == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
```

#### onLeave (index, nextIndex, direction)
滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数

- index 是离开的“页面”的序号，从1开始计算；
- nextIndex 是滚动到的“页面”的序号，从1开始计算；
- direction 判断往上滚动还是往下滚动，值是 up 或 down。
```
    onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);
        //after leaving section 2
        if(index == 2 &amp;&amp; direction =='down'){
            alert("Going to section 3!");
        }
        else if(index == 2 &amp;&amp; direction == 'up'){
            alert("Going to section 1!");
        }
    }
```

取消section的滚动

你可以在onLeave 回调函数中返回false，那么将取消滚动。


 ```
   onLeave: function(index, nextIndex, direction){
        //it won't scroll if the destination is the 3rd section
        if(nextIndex == 3){
            return false;
        }
    }
```

#### afterRender()

这个回调函数只是在生成页面结构的时候调用。这是要用来初始化其他插件或删除任何需要的文件准备好代码的回调（这个插件修改DOM创建得到的结构）。


```
    afterRender: function(){
        var pluginContainer = $(this);
        alert("The resulting DOM structure is ready");
    }
```

#### afterResize()
这个回调函数在窗口发生大小改变的时候被调用，就在部分调整。


```
    afterResize: function(){
        var pluginContainer = $(this);
        alert("The sections have finished resizing");
    }
```

#### afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)
滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数。

- anchorLink: anchorLink corresponding to the section.
- index: index of the section. Starting from 1.
- slideAnchor: anchor corresponding to the slide (in case there is)
- slideIndex: index of the slide. Starting from 1. (the default slide doesn&#8217;t count as slide, but as a section)
在没有anchorlinks的幻灯片或幻灯片SlideIndex参数是唯一使用定义的情况下。


```
    //假设这是钩子
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
 
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);
 
        //first slide of the second section
        if(anchorLink == 'secondPage' &amp;&amp; slideIndex == 1){
            alert("First slide loaded");
        }
 
        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 &amp;&amp; slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
```

#### onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex)
某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数。

- anchorLink: anchorLink corresponding to the section.
- index: index of the section. Starting from 1.
- slideIndex: index of the slide. Starting from 0.
- direction: takes the values right or left depending on the scrolling direction.
- nextSlideIndex: index of the destination slide. Starting from 0.

```
    onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
        var leavingSlide = $(this);
 
        //leaving the first slide of the 2nd Section to the right
        if(index == 2 &amp;&amp; slideIndex == 0 &amp;&amp; direction == 'right'){
            alert("Leaving the fist slide!!");
        }
 
        //leaving the 3rd slide of the 2nd Section to the left
        if(index == 2 &amp;&amp; slideIndex == 2 &amp;&amp; direction == 'left'){
            alert("Going to slide 2! ");
        }
    }
```

取消slide滑动

你可以设置回调函数onSlideLeave 返回false，那么他将阻止此次的滑动事件，就像onLeave一样。