<!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 = ;

            function pullupRefresh() {

                setTimeout(function() {

                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > )); //参数为true代表没有更多数据了。

                    $(".mui-table-view").append( '<li class="mui-table-view-cell"><a class="mui-navigate-right">Item '+count+'</a></li>' );

                }, );

            }

            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篇文章");

                }, );

            }

        </script>

    </body>

</html>

MUI上拉加载下拉刷新的更多相关文章

  1. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  2. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  3. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  4. RecyclerView 上拉加载下拉刷新

    RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...

  5. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

  6. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  7. SwipeRefreshLayout实现上拉加载下拉刷新

    package com.example.swiperefreshlayoutdemo; import java.util.ArrayList;import java.util.HashMap; imp ...

  8. MJRefresh(上拉加载下拉刷新)

    整理自:https://github.com/CoderMJLee/MJRefresh#%E6%94%AF%E6%8C%81%E5%93%AA%E4%BA%9B%E6%8E%A7%E4%BB%B6%E ...

  9. Flutter上拉加载下拉刷新---flutter_easyrefresh

    前言 Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式.Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色 ...

  10. 利用iscroll实现上拉加载下拉刷新

    1.首先引用isScroll插件 说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction ...

随机推荐

  1. ACM数论之旅16---母函数（又名生成函数）（痛并快乐着(╭￣3￣)╭）

    (前排出售零食瓜子) 前言: 母函数是个很难的东西,难在数学 而ACM中所用的母函数只是母函数的基础 应该说除了不好理解外,其他都是非常简单的 母函数即生成函数,是组合数学中尤其是计数方面的一个重要理 ...

  2. Caffe使用step by step：r-cnn目标检测代码

    深度学习算法火起来之后,基于深度学习各种模型都如雨后春笋一般在各个领域广泛应用. 由于想把深度学习算法应用在在视频目标检测方向,得到一个较好的结果.由于视频数据的复杂性,因此使用深度学习算法在视频中的 ...

  3. js框架总结

    参考地址 http://www.techweb.com.cn/network/system/2015-12-23/2245809.shtml https://www.cnblogs.com/mbail ...

  4. C# id 字符串之类的拼接

    背景 : id数组  [1,2,3,4,45,7] 要拼接字符串‘1’,‘2’,‘3’,看了同事自己写了代码 string+=‘,’ 之类的  头大 解决:string有静态函数 ,string.Jo ...

  5. 【bzoj4712】洪水 树链剖分+线段树维护树形动态dp

    题目描述 给出一棵树,点有点权.多次增加某个点的点权,并在某一棵子树中询问:选出若干个节点,使得每个叶子节点到根节点的路径上至少有一个节点被选择,求选出的点的点权和的最小值. 输入 输入文件第一行包含 ...

  6. BZOJ3244 NOI2013树的计数（概率期望）

    容易发现的一点是如果确定了每一层有哪些点,树的形态就确定了.问题变为划分bfs序. 考虑怎样划分是合法的.同一层的点在bfs序中出现顺序与dfs序中相同.对于dfs序中相邻两点依次设为x和y,y至多在 ...

  7. 小Z的袜子(hose) HYSBZ - 2038 （莫队算法）

    原文地址:http://hzwer.com/2782.html 「BZOJ2038」[2009国家集训队] 小Z的袜子(hose) 2014年4月26日13,34721 Description 作为一 ...

  8. Java应用中使用ShutdownHook友好地清理现场

    在线上Java程序中经常遇到进程程挂掉,一些状态没有正确的保存下来,这时候就需要在JVM关掉的时候执行一些清理现场的代码.Java中得ShutdownHook提供了比较好的方案. JDK在1.3之后提 ...

  9. java多线程 --ConcurrentLinkedQueue 非阻塞 线程安全队列

    ConcurrentLinkedQueue是一个基于链接节点的无界线程安全队列,它采用先进先出的规则对节点进行排序,当我们添加一个元素的时候,它会添加到队列的尾部:当我们获取一个元素时,它会返回队列头 ...

  10. Service Intent must be explicit的解决方法

    今天遇到如标题问题,查阅资料:http://blog.android-develop.com/2014/10/android-l-api-21-javalangillegalargumen.html ...