GitHub

2024-06-26 12:45| 来源: 网络整理| 查看: 265

slidePage Demo: simple animated scroll custom dragMode fullFeatured Featured

slidePage3 特别适合主流前端框架开发，无任何依赖库，Gzip压缩后仅有2.4k, 接口符合插件具有的初始化、销毁、重载的方法，适配PC和移动端，可实现内容超出屏幕滚动、手动播放动画、动态更新等特色功能，具体查看完整示例: fullFeatured

Documentation: Usage Install slidePage Including files Required HTML structure Initialization Configuration Options Using Animation Methods slidepage.slideNext() slidepage.slidePrev() slidepage.slideTo(page) slidepage.slideFile(page) slidepage.destroy() slidepage.update() Troubleshooting(常见问题汇总) Usage Including files Required HTML structure page1

page1 content

page2

page2 content

您可以查看完整examples里的html文件结构 fullFeatured.html

Initialization new slidePage() Configuration var slidepage = new slidePage({ slideContainer: '#slide-container', slidePages: '.slide-item', page: 1, refresh: true, dragMode: false, useWheel: true, useSwipe: true, useAnimation : true, // Events before: function(origin,direction,target){}, after: function(origin,direction,target){}, }); Options

在slidePage中，page指的是每一次全屏滚动的一屏，也可以理解为每一屏对应的页码，必须是1以上的整数

name type default description slideContainer String|Element '.slide-container' 指定slidePage要运行的容器选择器或元素 slidePages String|NodeList|HTMLCollection '.slide-page' 指定`slideContainer`容器里每个page的选择器或元素 page Number 1 首次进入的page页码 dragMode Boolean false 💡移动端开启触控拖动滑屏模式(此功能还在测试阶段)，默认为false，前提是`useSwipe: true` useAnimation Boolean true 是否开启动画 refresh Boolean true 每次滚动进入是否重新执行动画 useWheel Boolean true 是否开启鼠标滚轮滑动 useSwipe Boolean true 是否开启移动端触控滑动 Events name description before 每次全屏滚动前触发事件，回调三个参数(origin, direction, target)，分别是滚动前的page序号、方向('next'|'prev')、滚动后的page序号 after 每次全屏滚动后触发事件，回调三个参数(origin, direction, target)，参数释义同上 Using Animation

为了方便示例用animate.css，动画效果可以自己实现

Include animate.css HTML structure ;

在想要动画控制的元素上加上step类，并加上css动画类名即可使用动画，data-delay属性控制动画延时播放(默认为100毫秒);

手动触发动画在想要手动播放动画的元素上加上lazy类，并加上css动画类名即可使用动画，可以加上data-delay使触发时再延时播放; 通过slidepage.slideFire(page)指定某一页的lazy动画触发播放。 Drag Mode

最新加入的拖动滑屏模式，在实例化时传入配置dragMode: true，即可开启，此功能目前为测试阶段，请酌情使用。

现已加入Demo系列豪华套餐：

dragMode

需要注意的是，为了滑动松手后的动画体验更好，记得在你的项目里设置过渡动画类.slide-container .slide-page.transition，调整过渡函数和时长。具体查看示例代码：https://github.com/lipten/slidePage/blob/master/examples/drag.html#L13

Methods slidepage.slideNext()

滑动定位到下一屏

slidepage.slidePrev()

滑动定位到上一屏

slidepage.slideTo(page)

传入page页码，滑动定位到对应的page

slidepage.slideFire(page)

触发对应 page 的lazy手动动画

slidepage.destroy()

销毁当前实例，移除所有事件恢复class属性值。

slidepage.update(newSlidePages)

当html里的page发生变化时需要执行动态更新。

newSlidePages参数非必填，仅应对于初始化的时候slidePages参数传入的是NodeList或HTMLCollection时才需要在更新的时候再传一次变化后的DOM结构通知更新。

此方法非常适合现在流行的数据驱动型框架，当模型数据驱动改变pege的排列时，执行update可以起到更新的作用，可以先看示例源码了解：custom.html

Contributing development

本地运行

npm install npm run server

构建

npm run build

【本文地址】

公司简介

联系我们