fullpages
v1.0.2
Published
es6 fullpage
Downloads
8
Maintainers
Readme
介绍
- fullpages是基于es6开发的组件
- fullpages的大小由父级盒子大小决定所以必须保证其父级盒子充分100%,body,html都要宽高100%
- pc,移动端均可使用
- 组件自行判断终端设备,自适应移动端,并触发touch事件
- 屏幕大小改变时,组件自行重新渲染设备,适应当前窗口
- es5语法,请下载后使用fullpages.es5.js
安装
npm install fullpages --save
使用
<script src="fullpages.es5.js"></script> // es5引入方式
<div id="fullpage">
<div> // 必写内部盒子,为适应无滚动条,没有时将无法运行
<div></div> // 整页页面
<div></div> // 整页页面
<div></div> // 整页页面
<div></div> // 整页页面
</div>
</div>
import FullPage from 'fullpages' // es5略去
let fullpage=new fullPage('#fullpage',{
isScrollBar:false // 参数填写方式
})
参数
isScrollBar
- 属性:Boolean
- 默认值:false
- 作用:设置是否需要滚动条,false时无滚动条
runTime
- 属性:Number
- 默认值:300
- 作用:设置滚动时间,单位ms
mouseTime
- 属性:Number
- 默认值:300 // 默认会和runTime时间相同
- 作用:设置鼠标滚轮可以使用的时间,即滚动开始,经过此时间后,滚轮才能使用,单位ms
- 备注:此时间用于当滚屏后,需要动画交互的场景,可自行计算出时间,让用户看完动画后,才能进入下一页
- 注意:为确保整屏滚动的正常运行,mouseTime将不得小于runTime,当小于时,会默认改为与runTime相同
回调
// 此函数将在滚动时执行
fullpage.on('scroll',(res) => {
console.log(res)
// res为一个对象
})
res.currentPage
- Number 返回当前滚动至的页面索引值,第一页索引为0
res.maxPage
- Number 返回页面总数
res.path
- Boolean 返回当前滚动方向,true为向下,false为向上