MUI 实现下拉刷新上拉加载的简单例子

Posted oukele

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MUI 实现下拉刷新上拉加载的简单例子相关的知识,希望对你有一定的参考价值。

话不多说,直接上代码与效果图吧。

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.css" rel="stylesheet" />
        <style>
            /* 统一 轮播 图片的大小 */
            .mui-slider-item > a > img{
                width: 240px;
                height: 240px;
            }
        </style>
    </head>

    <body>
        <script src="../js/mui.js"></script>
        <script type="text/javascript">
            mui.init()
        </script>

        <!-- 主界面菜单同时移动 -->
        <!-- 侧滑导航根容器 -->
        <div class="mui-off-canvas-wrap mui-draggable">
            <!-- 主页面容器 -->
            <div class="mui-inner-wrap">
                <!-- 菜单容器 -->
                <aside class="mui-off-canvas-left" id="offCanvasSide">
                    <div class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <!-- 菜单具体展示内容 -->

                        </div>
                    </div>
                </aside>
                <!-- 主页面标题 -->
                <header class="mui-bar mui-bar-nav">
                    <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
                    <h1 class="mui-title">标题</h1>
                </header>
                <nav class="mui-bar mui-bar-tab">
                    <a class="mui-tab-item mui-active">
                        <span class="mui-icon mui-icon-home"></span>
                        <span class="mui-tab-label">首页</span>
                    </a>
                    <a class="mui-tab-item">
                        <span class="mui-icon mui-icon-phone"></span>
                        <span class="mui-tab-label">电话</span>
                    </a>
                    <a class="mui-tab-item">
                        <span class="mui-icon mui-icon-email"></span>
                        <span class="mui-tab-label">邮件</span>
                    </a>
                    <a class="mui-tab-item">
                        <span class="mui-icon mui-icon-gear"></span>
                        <span class="mui-tab-label">设置</span>
                    </a>
                </nav>
                <!-- 主页面内容容器 -->
                <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <!-- 主界面具体展示内容 -->


                        <!-- 图片轮播 start -->
                        <div id="slider" class="mui-slider">

                            <div class="mui-slider-group mui-slider-loop" id="top_img">

                            </div>

                            <div class="mui-slider-indicator" id="top_point">

                            </div>

                        </div>
                        <!-- 图片轮播 end -->

                        <!-- 图文列表 start -->
                        <ul class="mui-table-view" id="list_host_content">
                        </ul>
                        <!-- 图文列表 end -->

                    </div>
                </div>
                <div class="mui-off-canvas-backdrop"></div>
            </div>
        </div>

        <script>
            
            //
            var number = 0;
            
            var ajax = {
                title_img: function() {
                    mui.get(https://news-at.zhihu.com/api/4/news/latest, function(data) {
                        // 图片
                        var html = ‘‘;
                        // 循环点
                        var loop_point = ‘‘;

                        //跟随图片的点数
                        var point_number = ‘‘;

                        loop_point += 								<div class="mui-slider-item mui-slider-item-duplicate">
 +
                            									<a href="#">
 +
                            										<img src=" + data.top_stories[0].image + ">
 +
                            									</a>
 +
                            								</div>;

                        html += loop_point;

                        mui.each(data.top_stories, function(index, obj) {
                            // 图片
                            html += 								<div class="mui-slider-item">
 +
                                									<a  href="topNews.html?id= + obj.id + ">
 +
                                										<img src=" + obj.image + ">
 +
                                									</a>
 +
                                								</div>;
                            if (index == 0) {
                                point_number += <div class="mui-indicator mui-active"></div>;
                            } else {
                                point_number += <div class="mui-indicator"></div>;
                            }

                        });

                        html += loop_point;

                        // 追加内容
                        var mui_top_img = mui(#top_img);
                        var top_img = mui_top_img[0];
                        top_img.innerHTML = html;

                        var mui_top_point = mui(#top_point);
                        var top_point = mui_top_point[0];
                        top_point.innerHTML = point_number;

                        //获得slider插件对象
                        var gallery = mui(.mui-slider);
                        gallery.slider({
                            interval: 2000 //自动轮播周期,若为0则不自动播放,默认为0;
                        });
                    });
                },
                refresh: function() {
                    // 上拉下拉刷新组件
                    mui(#refreshContainer).pullRefresh({
                        up: {
                            height: 50, //可选.默认50.触发上拉加载拖动距离
                            auto: true, //可选,默认false.自动上拉加载一次
                            contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
                            contentnomore: 没有更多数据了, //可选,请求完毕若没有更多数据时显示的提醒内容;
                            callback: function() { //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
                                console.log("往上拉");
                                //异步执行
                                setTimeout(function() {
                                    ajax.info(number);
                                    number ++;
                                }, 200)
                            }
                        },
                        down: {
                            style: circle, //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
                            color: #2BD009, //可选,默认“#2BD009” 下拉刷新控件颜色
                            height: 50px, //可选,默认50px.下拉刷新控件的高度,
                            range: 100px, //可选 默认100px,控件可下拉拖拽的范围
                            offset: 0px, //可选 默认0px,下拉刷新控件的起始位置
                            auto: false, //可选,默认false.首次加载自动上拉刷新一次
                            callback: function() { //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
                                console.log("往下拉");
                            }
                        }
                    });
                },
                info: function(number) {
//                     let date = new Date();
//                     let year = date.getFullYear();
//                     let month = date.getMonth() + 1;
//                     let day = date.getDate();
// 
//                     let date1 = year + "" + month + "" + day;
//                     let info_date = date1 - number;

                    let date = 20131119;
                    let info_date = 20131119 - number;
                    mui.get(https://news-at.zhihu.com/api/4/news/before/ + info_date, function(data) {
                        
                        // 如果没有数据 禁用上拉加载
                        if( date == "" ){
                            mui("#refreshContainer").pullRefresh().endPullupToRefresh(true);
                        }else{
                            mui("#refreshContainer").pullRefresh().endPullupToRefresh(false);
                        }
                        
                        let html = ‘‘;
                        mui.each(data.stories, function(index, obj) {
                            html += 							<li class="mui-table-view-cell mui-media">
 +
                                								<a  href="detailNews.html?id= + obj.id + " >
 +
                                									<img class="mui-media-object mui-pull-right" src=" + obj.images[0] + ">
 +
                                									<div class="mui-media-body">
 +
                                										<p class="mui-ellipsis"> + obj.title + </p>
 +
                                									</div>
 +
                                								</a>
 +
                                							</li>;
                        });
                        let mui_content = mui(#list_host_content);
                        let content = mui_content[0];
                        content.innerHTML += html;    
                        
                    });
                },
                start: function() {
                    ajax.title_img();
                }
            };
            ajax.start();
            ajax.refresh();
        </script>

    </body>

</html>

效果 

技术图片

 

以上是关于MUI 实现下拉刷新上拉加载的简单例子的主要内容,如果未能解决你的问题,请参考以下文章

Android实战----RecyclerView下拉刷新和上拉加载的简单实现

上拉加载实现

mui 框架中结合mui.ajax实现 下拉刷新和上拉加载功能

mui实现移动端上拉加载下拉刷新功能

微信小程序下拉刷新和上拉加载的实现

使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。