iScroll 基本用法

有同学对 iscroll用法 忘得差不多了，特从最新讲义中摘出，用的时候翻翻就好 -- 记得 留言点赞，爱你们，么么哒 ：）~~

iScroll基本用法

• 容器标签(如：div) 自带的 overflow 滚动条 有点审美疲劳，且不支持 内容滑动 等效果

• 介绍：iScrol l是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件(4kb)。

• 官方：

  • iScroll 访问不了 (iscrolljs.com)

  • iScroll github (https://github.com/cubiq/iscroll) -> build 文件夹 包含各个版本

iScroll

• 中文文档 (http://caibaojian.com/iscroll-5/versions.html)

• 使用方法：

  • 必须使用 三层结构 （滚动列表容器 -> 数据容器 -> 数据项 ），比如：
    • div -> ul -> li
    • div -> div ->div
  • 至少设置 滚动列表容器 样式表 两个样式
    • overflow:hidden; - 隐藏默认滚动条
    • position:relative; - 必须为 滚动条 父容器设置定位
  • 导入iscroll.js 文件
  • 初始化 IScroll对象
    • 传入 滚动列表容器 的 选择器名称
    • 传入 参数对象
      • mouseWheel: true - 鼠标滚轮控制
      • scrollbars: true - 滚动条的显示

<style>
    * {
        margin: 0;
    }

    .wrapper {
        width: 300px;
        height: 200px;
        overflow: hidden; /* 隐藏默认滚动条 */
        border: 1px solid #0094ff;
        margin: 0 auto;
        position: relative; /* 必须为 滚动条 父容器设置定位 */
    }
</style>

<!--1.三层结构-->
<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

<!--2.初始化-->
<script type="text/javascript" src="iscroll.js"></script>

<script type="text/javascript">
    new IScroll('#wrapper', {
        mouseWheel: true, // 鼠标滚轮控制 
        scrollbars: true //滚动条的显示
    })
</script>

• 特点：
  • 可以在PC，移动设备和智能电视平台上工作
  • iScroll 可以处理任何需要与用户进行移动交互的元素：滚动，缩放，平移，无限滚动，视差滚动，旋转功能