套入mui官方网文本文档的一句话:“开发人员只需关注业务逻辑,完成加载更多数据信息就可以”。真的是非常好的框架。

想大量的掌握这一框架:http://dev.dcloud.net.cn/mui/

那麼怎样完成页面刷新,下拉载入的作用呢?

最先必须一个器皿:

1 <!--页面刷新器皿-->
2 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
3   <div class="mui-scroll">
4   <!--数据列表-->
5     <ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>
6   </div>
7 </div>

随后开展复位实际操作,根据mui.init方式中pullRefresh参数配置下拉载入各类主要参数:

mui.init({
  pullRefresh : {
    container:refreshContainer,//待更新地区标志,querySelector能精准定位的css选择符均可,例如:id、.class等
    up : {
      height:50,//可选择.默认设置50.开启下拉载入拖拽间距
      auto:true,//可选,默认设置false.全自动下拉载入一次
      contentrefresh : "正在加载...",//可选,正在加载情况时,下拉载入控制上显示信息的题目內容
      contentnomore:'沒有大量数据信息了',//可选,要求结束若沒有大量数据信息时显示信息的提示內容;
      callback :pullfresh-function //首选,更新涵数,依据实际业务流程来撰写,例如根据ajax从服务器获得新数据;
    }
  }
});

这儿重点关注callback主要参数项,为首选內容,里面写更新涵数,依据实际的业务流程来写,在具体新项目中,一般是根据ajax从服务器读取数据,随后开展html的动态性拼凑,产生数值数据。

 

 

 

下边举一个非常简单的事例:(完成下拉载入的作用)

器皿:

1 1 <!--页面刷新器皿-->
2 2 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
3 3   <div class="mui-scroll">
4 4   <!--数据列表-->
5 5     <ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>
6 6   </div>
7 7 </div>

一会要将数据信息放进 id=“testUl”的ul标签下,id自然随意取

 

启用mui.init方式:

 1 <script type="text/javascript">
 2     mui.init({
 3         pullRefresh : {
 4             container:refreshContainer,//待更新地区标志,querySelector能精准定位的css选择符均可,例如:id、.class等
 5             up : {
 6                 height:50,//可选择.默认设置50.开启下拉载入拖拽间距
 7                 auto:true,//可选,默认设置false.全自动下拉载入一次
 8                 contentrefresh : "正在加载...",//可选,正在加载情况时,下拉载入控制上显示信息的题目內容
 9                 contentnomore:'沒有大量数据信息了',//可选,要求结束若沒有大量数据信息时显示信息的提示內容;
10                 callback: function () {//首选,更新涵数,依据实际业务流程来撰写,例如根据ajax从服务器获得新数据;
11 
12                     /*每一次载入动态性的加上一个li*/
13                     $("#testUl").append($("<li>"   new Date()   "</li>"));
14 
15                     this.endPullupToRefresh(false);
16                 } 
17                 }
18                 }
19                 });
20 </script>    

callback主要参数中,写的是载入涵数,每一次载入,动态性形成一个li标签,用获取当前时间做为数据测试,贴到id=testUl的ul标签下。

这儿留意callback中的function最终的 this.endPullupToRefresh(false); 表明完毕载入,主要参数可选择true或false,true表明完毕载入,false再次载入,在具体新项目运用中,一般要依据网络服务器传回的信息量做一下分辨。

 

over!! 那样每一次下拉,都是会载入一条当今的時间。