MUI下拉刷新

• 单 webview 模式

下拉刷新时，触发的是原生下拉刷新控件，而整个webview位置不会发生变化，所以不会在拖动过程中发生DOM重绘，当控件拖动到一定位置触发动态加载数据以及刷新操作。此模式下拉刷新，相比双webview 模式，不创建额外 webview，性能更优。

<div id="pullrefresh" class="mui-content mui-scroll-wrapper" >
</div>

使用方法：
mui 初始化时设置pullRefresh各项参数，与双 webview 模式的子页面设置是一样的。

说明：
DOM结构无特殊要求，只需要指定一个下拉刷新容器标识即可

mui.init({
  pullRefresh : {
    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
    down : {
      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
      height:'50px',//可选,默认50px.下拉刷新控件的高度,
      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
      auto: true,//可选,默认false.首次加载自动上拉刷新一次
      callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
    },
    up: {
	   contentrefresh: '正在加载...',
	   callback: pullupRefresh//上拉加载函数 ，分页
	}
  }
});

模式说明：
优点：
性能更优，体现在两点：
相比双webview，不创建额外子 webview 性能消耗更少
下拉拖动过程中不会发生重绘，也减少了性能消耗
缺点：
目前仅支持‘cricle’样式以及该样式的颜色自定义

• 下拉刷新结束

function pullfresh-function() {
     //业务逻辑代码，比如通过ajax从服务器获取新数据；
     ......
     //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
     //没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
     mui('#refreshContainer').pullRefresh().endPulldown();
}

实例：

<div id="pullrefresh" class="mui-content mui-scroll-wrapper" >

    <div  id="app" class="mui-content-padded" style="margin: 5px;">

        <form>
        <div class="mui-input-row mui-search">
            <input id="search"  type="search" style="background-color: #fff;" class="mui-input-clear" v-model="searchKey" placeholder="组名称">
        </div>
        <a href="#" @click="addGroup()"><span class="mui-icon mui-icon-plusempty" style="margin-bottom: 5px;"></span>添加打卡组</a>
        <ul class="mui-table-view">
            <div v-for="group in groupList">
                <li   class="mui-table-view-cell">
                    <div class="mui-slider-right mui-disabled">
                        <a @click="deleteGroup(group.id,$event)" class="mui-btn mui-btn-red">删除</a>
                    </div>
                    <a @click='editGroup(group)' class="mui-navigate-right mui-slider-handle" style="white-space:normal; word-break:break-all;overflow:hidden;">
                        {{group.groupName}}
                    </a>
                </li>
            </div>
        </ul>
        </form>
            <div class="mui-scroll" v-if="loading">
                <div class="mui-loading" >
                    <div class="mui-spinner">
                    </div>
                    玩命加载中...
                </div>
            </div>

    </div>
    </div>

    </body>
    <script type="text/javascript">
        let client = "";
        if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            client = "Mobile";
        } else {
            client = "PC";
        }
        var searchTimer;
        mui.init({
            pullRefresh: {
                container: '#pullrefresh',
                down: {
                    contentrefresh: '正在加载...',
//                    auto: true,
                    callback: pulldownRefresh
                }
            }
        });
        function pulldownRefresh() {
            setTimeout(function() {
                init();
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
            }, 500);
        }
        //解决容器中onclick事件触发不了的问题，因为我的有点击事件的标签都是a标签，所以on的第二参数为a
        $("#pullrefresh").on('tap', 'a', function (event) {
            this.click();
        });
        let vm = new Vue({
            el: '#app',
            data: {
                searchKey:"",
                groupList:[],
                groupInfo:{},
                loading:true
            },
            methods: {
                loadData: function () {
                },
                addGroup: function () {
                   //新增
                },
                editGroup: function (group) {
                   //缓存
                    localStorage.setItem("updateGroup",JSON.stringify(group));
                    localStorage.setItem("optType","2");
                   //打开修改页面
                },
                deleteGroup:function (id,event) {
                	//删除逻辑
                }
                    
            },
            watch: {//监控变化
                searchKey: function () {
                    clearTimeout(searchTimer);
                    searchTimer = setTimeout(function () {
                        getData();
                    }, 500);
                }
            },
            mounted: function() {
               //初始化
            }
        });

        function init() {
            //加载数据
        }