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

代码背景

\n

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

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

我们使用200条左右item的文本列表,从底部滑动到顶部,来做个用户体验的对比。

以下是hello mui中的上拉加载示例:



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

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



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

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

功能特性

\n

~原生实现,不依赖任何前端框架

~滚动到底部并释放自动加载,segment+上拉加载也可轻松支持

~代码轻量模块化

~下个版本加入"正在加载菊花"

使用风险

\n

暂不支持下拉刷新功能,还没研究:)

已更新下拉刷新功能《分享使用原生滚动的下拉刷新功能

如何使用

\n

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>

\n

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

.ios-content {

text-align: left;

width: 100%;



position: absolute;

top: 44px;

bottom: 0;



overflow-y: scroll;

-webkit-overflow-scrolling: touch;

}

\n

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);

}

\n

上拉加载函数

\n
/**

* 上拉加载功能实现, 使用原生滚动

* @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);

}

\n

2015-07-03 16:15 1 条评论 分享
已邀请:
1

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

赞同来自: 语嫣

牛牛牛牛牛


1

蔡繁荣 - 发表是最好的记忆

赞同来自: DCloud_heavensoft

已更新下拉刷新的功能:)
文章 分享使用原生滚动的下拉刷新功能


1

glivia

赞同来自: thyiad

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


0

小菜鸟

赞同来自:

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);
帮你加了下拉加载,看看行不行?


0

小菜鸟

赞同来自:

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


0

hpking

赞同来自:

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


0

小菜鸟

赞同来自:

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


0

jwenlee

赞同来自:

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


0

_AJian_

赞同来自:

感谢分享


0

new

赞同来自:

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


0

蔡繁荣 - 发表是最好的记忆

赞同来自:

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


0

豆花饭

赞同来自:

感谢分享~


0

zuozuo168

赞同来自:

这叫原生啊!.....


0

阿骥

赞同来自:

这也叫原生?


0

ago99@sohu.com

赞同来自:

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


0

语嫣

赞同来自:

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


要回复问题请先登录注册

退出全屏模式 全屏模式 回复