mui上拉加载下拉刷新简单套用

<link rel="stylesheet" href="../../public/assets/mui/css/mui.css">
<script src="../../public/assets/mui/js/mui.js"></script>

1、html

<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
           <div class="mui-table-view mui-table-view-chevron unitconList"></div>
           <div class="mui-pull-bottom-pocket mui-block">
                <div class="mui-pull">
                     <div class="mui-pull-loading mui-icon mui-spinner mui-hidden"></div>
                     <div class="mui-pull-caption mui-pull-caption-down">上拉显示更多</div>
                </div>
           </div>
      </div>
      <div class="mui-scrollbar mui-scrollbar-vertical">
           <div class="mui-scrollbar-indicator"></div>
      </div>
</div>

 

2、js

　　//初始化变量
　　var count = 0;
　　var page=0;  //页码
　　　　$(function(){
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
                }
            });
            //下拉加载
            function pulldownRefresh() {
                $(".conList").html("");
                $(".mui-pull-caption-down").text("");
                setTimeout(function() {
                    page =1;  //初始化分页页码
                    nextlist(page); //初始化数据的方法
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
                }, 200);
            }

            // 上拉加载具体业务实现
            function pullupRefresh() {
                setTimeout(function() {
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count<0)); //参数为true代表没有更多数据了。
                    page ++;  //分页页码累加
                    nextlist(page);   //初始化数据的方法
                }, 200);
            }
            if (mui.os.plus) {
                mui.plusReady(function() {
                    setTimeout(function() {
                        mui('#pullrefresh').pullRefresh().pullupLoading();
                    }, 200);

                });
            } else {
                mui.ready(function() {
                    mui('#pullrefresh').pullRefresh().pullupLoading();
                });
            }
        });

 mui 官网   

http://dev.dcloud.net.cn/mui/