1. 技术文章
  2. mui的上拉加载下拉刷新的实现

mui的上拉加载下拉刷新的实现

由 折月煮酒 提交于 2019-11-28 03:50:25

----

效果图

----
用的是mui框架。（我自己不会，朋友教我的。这篇可能不是很好，希望能对你有所帮助。）


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" type="text/css" href="WEIXIN/css/mui.css"/>   
<link rel="stylesheet" type="text/css" href="WEIXIN/css/weui.min.css"/>
<title>我的报修工单</title>
</head>
<body>
<script src="ByFrame/js/jquery.min.js?v=2.1.4"></script>
<!--    ############ 分割线  #############     -->
 <!--BEGIN toast--> <div id="toast" style="display: none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-icon-success-no-circle weui-icon_toast"></i> <p class="weui-toast__content">已完成</p> </div> </div> <!--end toast--> <!--BEGIN error 错误d--> <div id="error" style="display: none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast" style="min-height:1.8em"> <p id="errorInfo">系统错误</p> </div> </div> <!--end toast-->
<!--    ############ 分割线  #############     -->
</body><!-- 微信里面的方法 --><script type="text/javascript" src="WEIXIN/js/mui.js"></script><script type="text/javascript" src="WEIXIN/js/zepto.min.js"></script><script type="text/javascript" src="js/wx_workTable.js"></script><script>$(document).ready(function() { mui.init({ subpages:[{ url:'wx_myWorkTable.html', id:'wx_myWorkTable.html', styles:{ top:'0px', bottom:'0px' } }] }); });</script></html>
其实我不是很清楚，id为啥子要那么写。上面是页面一，下面是页面二。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" type="text/css" href="WEIXIN/css/weui.min.css" />
<link rel="stylesheet" type="text/css" href="WEIXIN/css/mui.css" />


<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/flexslider.css"/>
<link rel="stylesheet" href="css/swiper.css"/>
<title>我的报修工单</title>
</head>
<body>
<script src="ByFrame/js/jquery.min.js?v=2.1.4"></script>


<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<ul style="padding: 3px 0 3px 0">
<div class="weui-actionsheet__cell" style="padding: 2px 0 2px 0">
<h4>我的工单列表</h4>
</div>
</ul>
<ul class="mui-table-view" id="wx_ul">
<!-- 动态加载数据 -->


</ul>
</ul>
</div>
</div>
<!--    ############ 分割线  #############     -->
<div id="dialogs">
<!--BEGIN error-->
       <div class="js_dialog" id="error" style="display: none;">
           <div class="weui-mask"></div>
           <div class="weui-dialog">
               <div class="weui-dialog__bd">系统错误</div>
               <div class="weui-dialog__ft">
                   <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
               </div>
           </div>
       </div>
<!--END error-->


<!--BEGIN loadError-->
       <div class="js_dialog" id="loadError" style="display: none;">
           <div class="weui-mask"></div>
           <div class="weui-dialog">
               <div class="weui-dialog__bd">加载数据发生错误</div>
               <div class="weui-dialog__ft">
                   <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
               </div>
           </div>
       </div>
<!--END loadError-->
</div>


<nav class="bottom-nav">
        <a href="wx_cusmenu.html" class="bottom-nav-item">
        <div class="bottom-nav-icon"><i class="diy-icon"><i class="fa fa-home"></i></i></div>
        <div class="bottom-nav-title">首页</div>
          </a>
          <a href="wx_repairtable.html" class="bottom-nav-item">
          <div class="bottom-nav-icon"><i class="diy-icon"><i class="fa fa-wrench"></i></i></div>
          <div class="bottom-nav-title">我要报修</div>
          </a>
          <a href="wx_myWorkTable.html" class="bottom-nav-item on ">
          <div class="bottom-nav-icon"><i class="diy-icon"><i class="fa fa-tasks"></i></i></div>
          <div class="bottom-nav-title">我的工单</div>
          </a>
          <a href="wx_mydata.html" class="bottom-nav-item ">
          <div class="bottom-nav-icon"><i class="diy-icon"><i class="fa fa-user"></i></i></div>
          <div class="bottom-nav-title">个人中心</div>
          </a>
       </nav>
<!--    ############ 分割线  #############     -->
</body><!-- 微信里面的方法 --><script type="text/javascript" src="WEIXIN/js/zepto.min.js"></script><script type="text/javascript" src="js/wx_workTable.js"></script><script type="text/javascript" src="js/wx_login.js"></script><script type="text/javascript" src="WEIXIN/js/mui.js"></script><script>// $(document).ready(function() {// $('#dialogs').on('click', '.weui-dialog__btn', function(){// $(this).parents('.js_dialog').fadeOut(200);// });//动态加载客户的工单
// wxInitWorkTable();

mui.init({
swipeBack : false,//侧滑返回组件
pullRefresh : {

container : '#refreshContainer', //一个功能的一部分
down : {
callback : pulldownRefresh,//callback事件回调冒号后面就是方法
height : 60,
auto : false,
contentdown : "下拉可以刷新",
},
up : {
height : 50,
auto : false,
contentrefresh : "正在加载...",
contentnomore : '没有更多数据了',
callback : pulluptoRefresh
}
}
});

$("#wx_ul").on('tap', 'a', function (event) {//这很重要！！！
// console.log("ss");//mui框架下拉刷新上拉加载，click事件无效的解决方法
this.click();//我有一篇专门写这个小问题。
});

//下拉刷新
function pulldownRefresh() {
setTimeout(function() { //三秒后执行函数
window.location.reload();//刷新
mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); //用来停止刷新
}, 2000);
}
//上拉加载
function pulluptoRefresh() {
setTimeout(function() { //2秒后执行函数
loadWxWorkTable();//上拉加载 这是我其他js里面写的方法，我这里调用就行了。
//mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);//true加载的那个会变成，没有更多数据了
//mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
}, 2000);
//这里可有可无，自己根据自己的情况。
// setTimeout(function() { //3秒后执行函数
// //停止刷新（加载）
// mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
// }, 4000);
}


});
</script>
</html>
被我注释掉的代码，和两个
<!--    ############ 分割线  #############     -->之间的内容，都和mui的上拉加载下拉刷新
无关。我只是懒得弄的那么好，反正我也不是什么大牛。
另外mui的文档api地址http://dev.dcloud.net.cn/mui/ui/
至于为什么要写两个页面，朋友和我是这么说的，一个页面的话，底层的内容就会被看见。（若是没有底层，那么只写页面二就行。）





标签
mui
js
js代码
css框架
WeUI
css
dialog
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!