让每一名学员高薪就业
返回列表 发新帖

浅谈Mui上拉加载下拉刷新

[复制链接]

40

主题

45

帖子

593

积分

版主

Rank: 7Rank: 7Rank: 7

积分
593

版主

发表于 2017-11-27 10:06:51  | 显示全部楼层 | 阅读模式
Mui被前端开发者誉为最接近原生app体验的高性能前端框架,事实是他确实不负众望,为前端开发工程师开发移动端页面及app时提供了十分的便捷与完美的方案。今天源码时代的H5老师就来给大家带来一个关于mui框架的福利:有关移动端时常会用到的加载利器“下拉刷新与上拉加载”。通过本文,你将知道如何将mui的这个功能轻松地运用到你的项目中。是不是很期待,废话不多说,直接上干货。
首先打开mui的官网,http://dev.dcloud.net.cn/mui/在这里你可以事先体验一下mui的各种功能,比如一些简单的弹框,按钮之类的。官网文档地址一并奉上:http://dev.dcloud.net.cn/mui/ui/ 不过对于笔者这样,不愿看说明书的人来说,还是撸起袖子,直接拷代码来得更实际一点。
  1. <font face="宋体" size="3">
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>上拉加载下拉刷新-MUI</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  8. <meta name="apple-mobile-web-app-capable" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <link rel="stylesheet" href="css/mui.css">
  11. </head>

  12. <body>
  13. <!--下拉刷新容器-->
  14. <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  15. <div class="mui-scroll">
  16. <!--数据列表-->
  17. <ul class="mui-table-view mui-table-view-chevron">
  18. </ul>
  19. </div>
  20. </div>
  21. <script src="js/mui.js"></script>
  22. <script>
  23. mui.init({
  24. pullRefresh: {
  25. container: '#pullrefresh',
  26. down: {
  27. callback: pulldownRefresh
  28. },
  29. up: {
  30. contentrefresh: '正在加载...',
  31. callback: pullupRefresh
  32. }
  33. }
  34. });
  35. /**
  36. * 下拉刷新具体业务实现
  37. */
  38. function pulldownRefresh() {
  39. setTimeout(function() {
  40. var table = document.body.querySelector('.mui-table-view');
  41. var cells = document.body.querySelectorAll('.mui-table-view-cell');
  42. for (var i = cells.length, len = i + 3; i < len; i++) {
  43. var li = document.createElement('li');
  44. li.className = 'mui-table-view-cell';
  45. li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
  46. //下拉刷新,新纪录插到最前面;
  47. table.insertBefore(li, table.firstChild);
  48. }
  49. mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
  50. }, 1500);
  51. }
  52. var count = 0;
  53. /**
  54. * 上拉加载具体业务实现
  55. */
  56. function pullupRefresh() {
  57. setTimeout(function() {
  58. mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
  59. var table = document.body.querySelector('.mui-table-view');
  60. var cells = document.body.querySelectorAll('.mui-table-view-cell');
  61. for (var i = cells.length, len = i + 20; i < len; i++) {
  62. var li = document.createElement('li');
  63. li.className = 'mui-table-view-cell';
  64. li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
  65. table.appendChild(li);
  66. }
  67. }, 1500);
  68. }
  69. if (mui.os.plus) {
  70. mui.plusReady(function() {
  71. setTimeout(function() {
  72. mui('#pullrefresh').pullRefresh().pullupLoading();
  73. }, 1000);

  74. });
  75. } else {
  76. mui.ready(function() {
  77. mui('#pullrefresh').pullRefresh().pullupLoading();
  78. });
  79. }
  80. </script>
  81. </body>
  82. </html></font>
复制代码
注意,一定不要忘记引入mui的样式库和js文件哦,如果你懒得找,不妨就在我GitHub上去拿吧,暖心地附上地址:
https://github.com/tangyingg/tangying  拿走时不要忘了star一下哈。
Demo效果图:
Mui上拉加载下拉刷新3056.png           Mui上拉加载下拉刷新3067.png
调试图                              微信界面效果图
下拉加载效果图:
Mui上拉加载下拉刷新3119.png     Mui上拉加载下拉刷新3130.png
  下拉正在加载              加载成功效果图
上拉刷新效果图:
Mui上拉加载下拉刷新3174.png             Mui上拉加载下拉刷新3186.png
上拉正在刷新                   刷新成功效果图
现在我们就可以举一反三地将这个例子用到自己的项目中了,此时各位是不是已经迫不及待地想挽起袖子撸一个实例出来啊。加油吧,少年!
本文章由源码时代H5前端学科讲师原创!
转载须注明出处(http://www.itsource.cn)!感谢大家的配合!

回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

最新活动

联系我们

Java培训  |   PHP培训  |   UI培训  |   H5培训  |   如何报名  |   视频下载
快速回复 返回顶部 返回列表