mui下拉加载

初始化方法类似下拉刷新，通过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从服务器获取新数据；
    }
  }
});


 1     <div id="pullrefreshs" class="mui-content mui-scroll-wrapper">
 2                 <div>
 3                     <ul class="list-group" id="list-group">
 4                         <?php foreach($data as $v):?>
 5                             <li class="list-group-item">
 6                                 <h4>
 7                                     <?php echo $v[ 'type'];?>
 8                                         <span class="span_list" <?php if($v[ 'is_add']==1 ){echo
 9                                         'style="color:green"';}?>
10                                             >+
11                                             <?php echo $v[price];?>
12                                         </span>
13                                 </h4>
14                                 <?php echo date( 'Y-m-d H:i:s',$v[ 'addtime']);?>
15                             </li>
16                             <?php endforeach;?>
17                     </ul>
18             </div>
19         </div>

特别这样div 我调试时就是这里有坑

 

 1 <script>
 2     mui.init({
 3         //swipeBack:true //启用右滑关闭功能
 4     });
 5     var item = document.getElementById('pullrefreshs');
 6     item.addEventListener("swiperight",
 7     function() {
 8         console.log("你正在向左滑动");
 9         window.history.go( - 1);
10     });
11 
12     var i = 1; //计数器
13     mui.init({
14         pullRefresh: {
15             container: '#pullrefreshs',
16             //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
17             up: {
18                 height: 500,
19                 //可选.默认50.触发上拉加载拖动距离
20                 contentrefresh: "正在加载...",
21                 //可选，正在加载状态时，上拉加载控件上显示的标题内容
22                 contentnomore: '没有更多数据了',
23                 //可选，请求完毕若没有更多数据时显示的提醒内容；
24                 callback: pullfresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
25             },
26         }
27     });
28 
29     function data() {
30         $.post('?m=Index&c=user&a=detail_account', { page: i },  function(re) {
31             i++;
32             if (re.error == 0) {
33                 mui("#pullrefreshs").pullRefresh().endPullupToRefresh(false);
34                 var str = '';
35                 $.each(re.msg, function(index, data) {
36                   str = str+" <li class='list-group-item'><h4> "+data.type+"<span class='span_list"+data.is_add+"'>"+data.price+"</span></h4>"+getLocalTime(data.addtime)+"</li>";                       
37                                         
38                 });
39                 $("#list-group").append(str);
40             } else if (re.error == 1) {
41                 mui("#pullrefreshs").pullRefresh().endPullupToRefresh(true);
42             }
43         },
44         'json')
45 
46     }
47 
48     function getLocalTime(nS) {     
49        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");      
50     } 
51     function pullfresh() {
52         setTimeout(function() {
53             data();
54         },
55         1000);
56         mui.init();
57     }
58 </script>

要引入css js 文件

1 <script src="html/js/mui.min.js"></script>
2 
3 <link rel="stylesheet" href="html/css/mui.min.css">

 

posted @ 2017-08-09 14:59  6671  阅读(405)  评论(0)  编辑  收藏  举报