MUI下拉刷新上拉加载实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38003892/article/details/80354422

DOM结构

<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    <div class="hui-media-list mui-scroll">
        <ul id="con">   
        </ul>
    </div>
</div>

JS部分

mui.init({
          pullRefresh : {
            container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            down:{
                callback :aaa //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                },
            up: {
                contentrefresh: '正在加载...',
                contentnomore:'没有更多数据了',
                callback: bbb
                }
          }
        });
        function aaa(){
            mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
        }
        function bbb(){
            for (var i=0;i<9; i++) {
                $('#con').append('<li><a href=""><div class="hui-media-content hui-media-content-left"><h1>标题内容....</h1><p>power by hcoder.net</p></div><div class="hui-media-list-img"><img src="img/信息科学.jpg" /></div></a></li>')
            }
            this.endPullupToRefresh(true|false);
            mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
        }
        mui.plusReady(function(){
            for (var i=0;i<9; i++) {
                $('#con').append('<li><a href=""><div class="hui-media-content hui-media-content-left"><h1>标题内容....</h1><p>power by hcoder.net</p></div><div class="hui-media-list-img"><img src="img/信息科学.jpg" /></div></a></li>')
            }
        })