Pageable 最佳轻量级 JS 单页全屏滚动演示插件

来源：易助科技网浏览量：24收藏

简介

Pageable是一个轻量级的 JS 库，用于生成全屏滚动演示，允许用户通过拖动、滑动和鼠标滚轮事件滚动分区页面，支持水平和垂直滚动。

（下载的附件中附有DEMO）

更多单页滚动插件：👉 [ 详情 ]

插件特定

重量轻（gzipped小于3kb）

反应敏捷的

Performant

触摸支持

易于设置

IE10+

使用

1. 引入

安装

npm install pageable --save

html中引入文件

//您还可以包括将样式应用于导航点和按钮的可选样式表
<link rel="stylesheet" href="css/pageable.min.css">

<script src="js/pageable.js"></script>

2. HTML

<main id="example">
  <section data-anchor="Page 1">
    Section 1
  </section>
  <section data-anchor="Page 2">
    Section 2
  </section>
  <section data-anchor="Page 3">
    Section 3
  </section>
  <section data-anchor="Page 4">
    Section 4
  </section>
  <section data-anchor="Page 5">
    Section 5
  </section>
  ...
</main>

如果不设置[data anchor]属性，则必须使用anchors选项设置anchors。

如果启用了 pips，它们的HTML将附加到 .pg-wrapper 元素之后的 .pg-container 元素。

定义的锚点将被 “slugified” 并用作页面的id - 例如，My Page 1 将转换为 my-page-1 。

3. 调用

激活页面

new Pageable("#example");

自定义滚动演示文稿的默认选项

new Pageable("#example",{
    // displays navigation pips
    pips: true,
    
    // animation speed
    animation: 300,
    // delay in ms
    delay: 0,
    // the interval in ms that the resize callback is fired
    throttle: 50,
    // swipe / mouse drag distance in px
    swipeThreshold: 50,
    // or 'horizontal'
    orientation: "vertical", 
    // drag / scroll freely instead of snapping to the next page
    freeScroll: false,
    // nav elements
    navPrevEl: false,
    navNextEl: false,
    // infinite scroll
    infinite: false, 
    // default: false
    slideshow: { // enable slideshow
      interval: 3000,
      delay: delay
    },
    // easing function
    easing: function easing(t, b, c, d, s) {
     return -c * (t /= d) * (t - 2) + b;
    },
    // child selector
    childSelector: '[data-anchor]',
    
});

回调功能

new Pageable("#example",{
    onInit: () => {},
    onBeforeStart: () => {},
    onUpdate: () => {},
    onStart: () => {},
    onScroll: () => {},
    onFinish: () => {},
});

启用/禁用触发事件

new Pageable("#example",{
    events: {
      wheel: true,
      mouse: true,
      touch: true,
      keydown: true
    }
});

4. API 方法

// Scroll to next page.
instace.next();
// Scroll to previous page.
instace.prev();
// Scroll to a specific
instace.scrollToPage(index);
// Scroll to a specific anchor
instace.scrollToAnchor(anchor);
// Set the orientation
// 'vertical' or 'horizontal'
instace.orientate(orientation);
// Stop the slideshow
instace.slideshow().stop();
// start/resume the slideshow
instace.slideshow().start();

5. 事件处理

instance.on("init", data => {
  // on init
});
instance.on("update", data => {
  // on update
});
instance.on("scroll.before", data => {
  // before scroll
});
instance.on("scroll.start", data => {
  // when scrolling
});
instance.on("scroll", data => {
  // during scroll
});
instance.on("scroll.end", data => {
  // after scrolling
});

6. 锚点 Anchors

页面上任何具有与当前Pageable实例中的哈希匹配的哈希的锚点都将触发滚动。这允许您添加导航链接，而无需定义事件侦听器或回调来触发滚动。