蔡繁荣
蔡繁荣
  • 发布:2015-07-03 16:15
  • 更新:2017-08-12 07:24
  • 阅读:12197

分享使用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);  
}
2015-07-03 16:15 1 条评论 负责人:无 分享
已邀请:
wenju

wenju - http://www.mescroll.com -- 精致的下拉刷新和上拉加载js框架. 主流APP案例, 一套代码多端运行~ 问题咨询请发私信哈~

牛牛牛牛牛

蔡繁荣

蔡繁荣 (作者) - 发表是最好的记忆

  • 语嫣

    还是 mescroll 厉害 貌似后来者居上了 哈哈 都是大神

    https://ask.dcloud.net.cn/article/529

    2017-08-12 07:25

glivia

glivia

这些都是用css3效果实现的,用ISCROLL插件实现的,为什么能说是原生呢?

小菜鸟

小菜鸟

pullRefresh: {
container: '#pullrefresh',
callback: pulldownRefresh,
}
function pulldownRefresh() {
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 + 3; 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.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1000);
帮你加了下拉加载,看看行不行?

  • 蔡繁荣 (作者)

    我写的上拉加载不是使用mui的上拉刷新组件,HTML结构也跟官方的示例不一样,所以不能直接套用该代码:)

    2015-07-04 08:59

小菜鸟

小菜鸟

我把上拉加载和下拉刷新都写了,其实思路是一样的

  • 蔡繁荣 (作者)

    有点没明白,是用我写的上拉加载 + mui的上拉刷新吗?

    2015-07-04 09:22

  • 小菜鸟

    回复 蔡繁荣:对,在你的基础上写的

    2015-07-04 09:24

  • 蔡繁荣 (作者)

    回复 小菜鸟:真的吗?在我的基础上加mui的下拉刷新可以使用吗?我还没有试过

    2015-07-04 09:49

hpking

hpking

还得继续完善,问题还是很多

小菜鸟

小菜鸟

可以的,我都实现了,你可以试试,思路是一样的

  • 蔡繁荣 (作者)

    我测试了,iOS下mui的下拉刷新功能,会产生自绘的滚动条,两种模式的实现原理是不一样的,无法混用

    2015-07-05 14:20

jwenlee

jwenlee

DCLOUD有你更精彩,希望继续优化

_AJian_

_AJian_

感谢分享

new

new

还是有bug 加载过300多后 再往回翻就会有白页了

蔡繁荣

蔡繁荣 (作者) - 发表是最好的记忆

我也遇到了,快速滑动的时候偶尔会出现白块,但这应该是HTML5的原因,选择城市索引列表快速滑动的时候也会出现白块。希望高人找到解决的办法可以告之。

豆花饭

豆花饭

感谢分享~

zuozuo168

zuozuo168

这叫原生啊!.....

阿骥

阿骥

这也叫原生?

ago99@sohu.com

ago99@sohu.com

要是加载的时候底部像MUI那样有文字提示就好了,请问有人添加文字提示了吗,如何能做到啊。

语嫣

语嫣

还是 mescroll 厉害 貌似后来者居上了 哈哈 都是大神
https://ask.dcloud.net.cn/article/529

该问题目前已经被锁定, 无法添加新回复