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 += ‘\t\t\t\t\t\t\t\t<div class="mui-slider-item mui-slider-item-duplicate">\n‘ +
                            ‘\t\t\t\t\t\t\t\t\t<a href="#">\n‘ +
                            ‘\t\t\t\t\t\t\t\t\t\t<img src="‘ + data.top_stories[0].image + ‘">\n‘ +
                            ‘\t\t\t\t\t\t\t\t\t</a>\n‘ +
                            ‘\t\t\t\t\t\t\t\t</div>‘;

                        html += loop_point;

                        mui.each(data.top_stories, function(index, obj) {
                            // 图片
                            html += ‘\t\t\t\t\t\t\t\t<div class="mui-slider-item">\n‘ +
                                ‘\t\t\t\t\t\t\t\t\t<a  href="topNews.html?id=‘ + obj.id + ‘">\n‘ +
                                ‘\t\t\t\t\t\t\t\t\t\t<img src="‘ + obj.image + ‘">\n‘ +
                                ‘\t\t\t\t\t\t\t\t\t</a>\n‘ +
                                ‘\t\t\t\t\t\t\t\t</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 += ‘\t\t\t\t\t\t\t<li class="mui-table-view-cell mui-media">\n‘ +
                                ‘\t\t\t\t\t\t\t\t<a  href="detailNews.html?id=‘ + obj.id + ‘" >\n‘ +
                                ‘\t\t\t\t\t\t\t\t\t<img class="mui-media-object mui-pull-right" src="‘ + obj.images[0] + ‘">\n‘ +
                                ‘\t\t\t\t\t\t\t\t\t<div class="mui-media-body">\n‘ +
                                ‘\t\t\t\t\t\t\t\t\t\t<p class="mui-ellipsis">‘ + obj.title + ‘</p>\n‘ +
                                ‘\t\t\t\t\t\t\t\t\t</div>\n‘ +
                                ‘\t\t\t\t\t\t\t\t</a>\n‘ +
                                ‘\t\t\t\t\t\t\t</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>

效果

原文地址:https://www.cnblogs.com/oukele/p/10706451.html

时间: 2024-10-27 19:51:31

MUI 实现下拉刷新上拉加载的简单例子的相关文章

最新Android ListView 下拉刷新 上滑加载

开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,之前大家最常用的应该是pull to refresh或它的变种版吧,google官方在最新的android.support.v4包中增加了一个新类SwipeRefreshLayout,地址 这个类的作用就是提供官方的下拉刷新,并且效果相当不错,而上拉加载更多则用我们自定义的listview,也是相当简单. 下拉刷新 简单的介绍下: 首先它是一个viewgroup,但是它只允许有一个子控件,子控件能是任何view,使用的时候,所在

十分钟实现ListView下拉刷新上滑加载更多

说到ListView下拉刷新几乎每个APP都会用到,所以ListView下拉刷新是很重要的,就像ListView优化一样是你必会的东西. ListView实现下拉刷新如果我们开发人员自己编写相对来说比较费事的,当我们使用第三方库之后我们再来开发这个功能就会省事很多.相比与自己实现可以少编写不少代码,Android-PullToRefresh库可以轻松实现ListView的下拉刷新功能. 要使用Android—PullToRefesh库对ListView实现下拉刷新要经过以下几个步骤: 1.下载A

Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/details/78781682 ,这里是看了之后,结合自己实际遇到的问题写的. 首先引入包. //下拉框 implementation 'com.android.support:recyclerview-v7:28.0.0-beta01' implementation 'com.scwang.smar

android 安卓 listview 支持下拉刷新 上拉加载更多

[1]重写listView import java.text.SimpleDateFormat; import java.util.Date; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; import android.view.ViewGrou

带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

转载请注明出处:http://blog.csdn.net/lowprofile_coding/article/details/51321896 一 .前言 最近实在太忙,一个多礼拜没有更新文章了,于是今晚加班加点把demo写出来,现在都12点了才开始写文章. 1.我们的目标 把RecyclerView下拉刷新上拉加载更多加入到我们的开发者头条APP中. 2.效果图 3.实现步骤 找一个带上拉刷新下载加载更多的RecyclerView开源库,我们要站在巨人的肩膀上 下载下来自己先运行下demo,然

Android 下拉刷新上拉加载 多种应用场景 超级大放送(上)

转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉加载,网上的Demo太多太多了,这里不是介绍怎么去实现下拉刷新上拉加载,而是针对下拉刷新上拉加载常用的一些应用场景就行了一些总结,包含了下拉刷新上拉加载过程中遇到的一些手势冲突问题的解决方法(只能算是抛砖引玉). 去年9月的时候,那时自己正在独立做Android项目.记得刚刚写完那个ListView列表页面(木有下拉刷新,上拉加载)

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

android 下拉刷新上拉加载更多,高仿ios左滑动删除item,解决了众多手势问题

一.前言 老规矩,别的不说,这demo是找了很相关知识集合而成的,可以说对我这种小白来说是绞尽脑汁!程序员讲的是无图无真相!现在大家一睹为快! 二.比较关键的还是scroller这个类的 package com.icq.slideview.view; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; i

Android 下拉刷新上拉加载效果功能,使用开源项目android-pulltorefresh实现

应用场景: 在App开发中,对于信息的获取与演示,不可能全部将其获取与演示,为了在用户使用中,给予用户以友好.方便的用户体验,以滑动.下拉的效果动态加载数据的要求就会出现.为此,该效果功能就需要应用到所需要的展示页面中. 知识点介绍: 本文主要根据开源项目android-pulltorefresh展开介绍. android-pulltorefresh [一个强大的拉动刷新开源项目,支持各种控件下拉刷新 ListView.ViewPager.WevView.ExpandableListView.G

使用MJRefresh自定义下拉刷新,上拉加载动画

有时候我们需要自己设置下拉刷新,上拉加载动画的实现,这里主要是记录下使用MJRefresh自定义下拉刷新,上拉加载动画..... 下拉刷新我们只需要继承MJRefreshGifHeader即可: 实现代码如下: - (void)prepare{ [super prepare]; self.stateLabel.hidden = NO; self.lastUpdatedTimeLabel.hidden = YES; [self setImages:@[[UIImage imageNamed:@"v