分享使用H5原生滚动的上拉加载功能v1.0.1

分类：MUI

代码背景

环境：iOS，因为目前mui上拉加载功能使用的是滚动条自绘的scroll插件，当内容少的时候，滑动的滚动效果还好，但是当内容达到上百条的时候，滑动的体验变得非常不真实，在底部的时候，用力往上滑动，则直接从底部滑动到顶部。

列表的滑动体验是致命的，更何况还是iPhone，如果体验不好，那说不过去！

我们使用200条左右item的文本列表，从底部滑动到顶部，来做个用户体验的对比。
以下是hello mui中的上拉加载示例：

尽管有200多条，但是用户在滑动的时候，直接从底部滑到顶了，因为真实环境更多的是图文列表的情况，用户想要刹车都刹不住。（ps: 虽然可以使用阻尼系数来降低滑动速率，但是还是可以感觉到与原生的差别。）

现在看看使用原生滚动的上拉加载示例：

滑动的体验与原生App的体验一致，因为webkit的滚动回弹就是使用原生底层的实现。

好了，直接上代码，欢迎各位拍砖，碰撞交流思想！

功能特性

~原生实现，不依赖任何前端框架
~滚动到底部并释放自动加载，segment+上拉加载也可轻松支持
~代码轻量模块化
~下个版本加入"正在加载菊花"

使用风险

暂不支持下拉刷新功能，还没研究：）
已更新下拉刷新功能《分享使用原生滚动的下拉刷新功能》

如何使用

1、html，列表底部添加margin-bottom:10px, 否则加载出来新的了也不知道

<div id="content" class="ios-content">  
    <div id="content_inner">  
        <!--数据列表-->  
        <ul class="mui-table-view mui-table-view-chevron" style="margin-bottom: 10px;">  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right">Item 1</a>  
            </li>  
            ...  
            <li class="mui-table-view-cell">  
                <a class="mui-navigate-right">Item 15</a>  
            </li>  
        </ul>  
    </div>  
</div>

2、css 使用div的区域滚动来产生滚动条

.ios-content {  
    text-align: left;   
    width: 100%;  

    position: absolute;  
    top: 44px;  
    bottom: 0;  

    overflow-y: scroll;  
    -webkit-overflow-scrolling: touch;  
}

3、js 这里主要为了演示上拉加载，没有使用模板引擎，只是简单创建li元素

document.addEventListener('DOMContentLoaded', function(){  
    pullup_load({  
        container: '#content',  
        callback: get_item_list  
    });  
}, false);  

/**  
 * 上拉加载具体业务实现  
 */  
function get_item_list() {  
    // 模拟ajax加载网络数据  
    setTimeout(function() {  
        var table = document.body.querySelector('.mui-table-view');  
        var cells = document.body.querySelectorAll('.mui-table-view-cell');  
        for (var i = cells.length, len = i + 20; i < len; i++) {  
            var li = document.createElement('li');  
            li.className = 'mui-table-view-cell';  
            li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  
            table.appendChild(li);  
        }  
    }, 600);  
}

上拉加载函数

/**  
 * 上拉加载功能实现, 使用原生滚动  
 * @param {Array} options  
 * options: {  
 *    container: '#content' // 容器   
 *    callback: load_more_function // 上拉加载业务逻辑  
 * }  
 * @author fanrong33  
 * @version 1.0.1 build 20150703  
 */  
function pullup_load(options){  

    document.querySelector(options['container']).addEventListener('scroll', function(){  
        // 没放开，直接打回  
        if(is_touch) return;  

        var scroll_height = document.querySelector(options['container']).scrollHeight; // 滚动条的高度  
        var scroll_top    = document.querySelector(options['container']).scrollTop;    // 滚动了多少像素  
        var offset_height = document.querySelector(options['container']).offsetHeight; // 偏移的高度  

        // 放开了，并且滑动到最底部，则加载更多  
        if(!is_touch && scroll_top >= scroll_height-offset_height-60){  
            // console.log('加载更多');  
            options['callback']();  
        }else{  
            // 放开了，并且在上面游荡  
            return;  
        }  
    })  

    var is_touch = false;  
    document.querySelector(options['container']).addEventListener('touchstart', function(){  
        is_touch = true;  
    }, false);  
    document.querySelector(options['container']).addEventListener('touchend', function(){  
        is_touch = false;  
    }, false);  
}