好资源导航 » 文章资讯 » MUI 上拉刷新/下拉加载功能实例代码

MUI 上拉刷新/下拉加载功能实例代码

2024-02-25 18:12:03 49

新闻信息列表必备的功能,支持Table，Ul等列表.

以下是DIV版本，在安卓端或者ios端必须使用双webview模式，传送门：http://dev.dcloud.net.cn/mui/pulldown/

mui.init ({ pullRefresh: { container:'#pullrefresh', down:{ callback:pulldownRefresh }, up:{ contentrefresh:'正在加载...', callback:pullupRefresh } } }); /* *下拉刷新具体业务实现 */ functionpulldownRefresh() { setTimeout(function() { vartable=document.body.querySelector('.mui-table-view'); varcells=document.body.querySelectorAll('.mui-table-view-cell'); //模拟数据 for(vari=cells.length,len=i+3;i'; //下拉刷新，新纪录插到最前面； table.insertBefore(li,table.firstChild); } mui('#pullrefresh').pullRefresh().endPulldownToRefresh();//refreshcompleted },1500); } varcount=0; /* *上拉加载具体业务实现 */ functionpullupRefresh() { setTimeout(function(){ mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count>2));//参数为true代表没有更多数据了。 vartable=document.body.querySelector('.mui-table-view'); varcells=document.body.querySelectorAll('.mui-table-view-cell'); for(vari=cells.length,len=i+20;i'; table.appendChild(li); } },1500); } if(mui.os.plus){ mui.plusReady(function(){ setTimeout(function(){ mui('#pullrefresh').pullRefresh().pullupLoading(); },1000); }); }else { mui.ready(function(){ mui('#pullrefresh').pullRefresh().pullupLoading(); }); }

个人心得

1、手动加载loading，并且会立即调用[下拉刷新]绑定的函数

mui('#pullrefresh').pullRefresh().pullupLoading();//使用这个之后，自动会加载[下拉刷新]绑定的函数

2、停止上拉刷新和下拉加载的loading

mui('#pullrefresh').pullRefresh().endPullupToRefresh(num>=cnt);//参数可以为返回true/false的表达式
mui('#pullrefresh').pullRefresh().endPulldownToRefresh()；

3、初始化

初始化时通常要将原数据列表清空，如：$("#mui-table-view").html("");

那么请务必将以下代码放置在清空代码之后.这和scroll的滚动性质有关

mui('#pullrefresh').pullRefresh().refresh(true);//恢复滚动
mui('#pullrefresh').pullRefresh().scrollTo(0,0,100);//滚动置顶

4、Iscroll方面的扩展和内容

https://www.nhooo.com/article/111090.htm

5Vue使用




.mui-card:nth-last-child(1){margin-bottom:70px;}
.mui-card-header>img:first-child{width:100%;height:100%;}
.mui-pull-bottom-pocket{position:inherit}

以上所述是小编给大家介绍的MUI上拉刷新/下拉加载功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

MUI 上拉刷新/下拉加载功能实例代码

热门推荐

随机推荐