MUI上拉加载下拉刷新

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Hello MUI</title>        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">        <meta name="apple-mobile-web-app-capable" content="yes">        <meta name="apple-mobile-web-app-status-bar-style" content="black">        <link rel="stylesheet" href="../css/mui.min.css">        <style type="text/css">            .mui-content>.mui-table-view:first-child {                margin-top: -1px;            }        </style>    </head>    <body>        <!--下拉刷新容器-->        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">            <div class="mui-scroll">                <!--数据列表-->                <ul class="mui-table-view mui-table-view-chevron"></ul>            </div>        </div>        <script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>        <script>                        mui.init({                pullRefresh: {                    container: '#pullrefresh',                    down: {                        style:'circle',                        callback: pulldownRefresh                    },                    up: {                        auto:true,                        contentrefresh: '正在加载...',                        callback: pullupRefresh                    }                }            });                        var count = 0;            function pullupRefresh() {                setTimeout(function() {                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 5)); //参数为true代表没有更多数据了。                    $(".mui-table-view").append( '<li class="mui-table-view-cell"><a class="mui-navigate-right">Item '+count+'</a></li>' );                }, 1500);            }            function addData() {                count++;                $(".mui-table-view").prepend( '<li class="mui-table-view-cell"><a class="mui-navigate-right">Item '+count+'</a></li>' );            }            /**             * 下拉刷新具体业务实现             */            function pulldownRefresh() {                setTimeout(function() {                    addData();                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh();                    mui.toast("为你推荐了5篇文章");                }, 1500);            }        </script>    </body></html>

文章转载于:https://www.cnblogs.com/wordblog/p/10224752.html

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《MUI上拉加载下拉刷新》