/jQuery-iScrollLayout

The jQuery iScrollLayout Plugin is mainly used for lateral rolling.

Primary LanguageJavaScriptMIT LicenseMIT

欢迎使用 jQuery iScrollLayout 插件

jQuery.iScrollLayout 是一款主要解决横向导航滚动的插件，插件功能主要由 iScroll 构成，插件支持所有 iScroll 参数及使用示例。

示例文件

基本示例

使用说明

jQuery.iScrollLayout 是一款非常简单的插件，具体的使用示例可以参考 demos 目录的演示文件。

首先需要引入文件：

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/iScroll/5.2.0/iscroll.js"></script>
<script src="../src/jquery.iscrolllayout.js"></script>

认识几个关键字：

  • iScrollLayout：代表插件名称，根类名
  • items：代表列表节点
  • item：代表元素节点
  • current：代表当前激活的元素节点

插件默认调用模式：主要由 iScrollLayout items item current 类组成

<h2>默认横向滚动示例</h2>
<div class="iScrollLayout">
    <div class="items" style="white-space: nowrap;">
        <a class="item" href="#">第1个</a>
        <a class="item" href="#">第2个</a>
        <a class="item current" href="#">第3个</a>
        <a class="item" href="#">第4个</a>
        <a class="item" href="#">第5个</a>
    </div>
</div>

插件根节点属性调用模式：主要由 iScrollLayout 类以及其 items item current iscroll 属性组成

<h2>默认横向滚动示例</h2>
<div class="iScrollLayout" data-items=".items"
     data-item=".item" data-current=".current"
     data-iscroll='{"scrollX": true, "scrollY": false, "click": true}'>
    <div class="items" style="white-space: nowrap;">
        <a class="item" href="#">第1个</a>
        <a class="item" href="#">第2个</a>
        <a class="item current" href="#">第3个</a>
        <a class="item" href="#">第4个</a>
        <a class="item" href="#">第5个</a>
    </div>
</div>

插件 JavaScript 调用模式：主要由 itemsEle itemEle currentEle iScrollOptions 参数组成

$(".iScrollLayout").iScrollLayout({
    itemsEle: '.items',
    itemEle: '.item',
    currentEle: '.current',
    iScrollOptions: {
        "scrollX": true,
        "scrollY": false,
        "click": true
    }
});