hyhc-scroll

移动端下拉刷新插件

使用原生 JS 编写的模仿滚动效果的插件，支持 UMD 规范，使用 CSS3 的变换（transfrom）做为滚动条的移动方式， 过渡（transition）做为滑动效果的实现，能够使用带特定浏览器前缀(webkitTransform)版本的 CSS3 样式。

拥有以下功能：

• 下拉刷新列表
• 上拉加载数据
• 滑动效果
• 滚动到边界时的回弹效果
• 加载完全部数据后的提示
• 一些预置的样式

此外，还开放了一些 API 让使用者可以自行操作滚动位置。

引入插件

非模块化开发时，需要在页面上引用 hscroll.js 与 hscroll.css ：

<script src="hscroll.js"></script>
<link rel="stylesheet" href="hscroll.css">

之后，插件会在 window 上注册一个变量 window.HScroll。

模块化开发时(如：webpack)，先通过 NPM 安装本插件，然后在JS中引用模块：

var HScroll = require('@hyhc/scroll');

而样式，可在源文件(less、sass、stylus)中通过 @import 指令引用：

@import '/node_modules/@hyhc/scroll/hscroll.css';

由于本插件已经将图片以 base64 形式写入样式文件，因此不再需要其他操作。

基本使用

本插件需要一些基本的 html 结构，在使用插件的地方加入如下的 html：

<!-- 第一层做为滚动容器，大小默认和父元素一样大 -->
<div id="wrapper" class="h-scroll">
    <!-- 第二层做为实际在滚动的元素，其 overflow 为 hidden，请不要重写此样式 -->
    <div class="h-scroll-wrapper">
        <!-- 第三层用于放置滚动溢出时所显示的‘下拉刷新’等内容，插件会动态生成一些元素 -->
        <div class="h-scroll-content">
            <!-- 这里放你的列表项 -->
        </div>
    </div>
</div>

初始化：

var hscroll = new HScroll(document.getElementById('wrapper'), {
    onRefresh: function(done){
        //列表刷新时的回调函数
        //在插件初始化时，会直接被调用，以加载第一页数据
        //参数 done ，是一个函数，用于通知插件数据已经加载完成

        $.ajax(/* 一些参数 */)
        .then(function(result){
            //TODO: 渲染列表
            //done 函数有一个参数，用于表示列表数据是否全部加载完成
            //用于为用户显示一个提示
            done(false);
        });
    },
    onLoad: function(done){
        //列表在加载下页数据时的回调函数
        //用于和 onRefresh 类似
    }
});

插件选项

onRefresh: 列表刷新时的回调函数，有一个 done 参数，用于通知插件数据已经加载完成。

onLoad: 列表在加载下页数据时的回调函数，有一个 done 参数，用于通知插件数据已经加载完成。

createTip: 用于自定义‘已加载全部数据’的提示信息，使用方式如下：

new HScroll(document.getElementById('wrapper'), {
    //...其他选项
    createTip: function(container){
        //container 是放置提示的容器元素，直接为该元素添加内即可
        container.textContent = '已加载全部数据'
    }
})

插件API

getCurrentPosition(): 获取当前滚动条位置，与原生的 scrollTop 不一样的是，它一般是一个负数。

scrollTo(y, time, callback): 滚动到指定的位置 参数说明：

• y: [必填] 要滚动到的位置
• time: [可选] 动画时间，不传则是直接跳转到 y 参数所指定的位置
• callback: [可选] 动画完成后的回调函数

scrollToTop(time, callback): 滚动到顶部

scrollToBottom(time, callback): 滚动到底部

scrollToNextPage(time, callback): 滚动到下一屏

scrollToPrevPage(time, callback): 滚动到上一屏