mui框架被定位为“最接近原生体验的移动App的UI框架”。

写下mui框架中常用的两个功能，下拉刷新和上拉加载，没有后台交互，用js写假数据模拟，下面直接上代码。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>下拉和上拉加载demo</title>

    <link rel="stylesheet" type="text/css" href="mui/css/mui.css">

</head>

<body>

    <script type="text/javascript" src="mui/js/mui.js"></script>

    <header class="mui-bar mui-bar-nav">

        <h1 class="mui-title">下拉和上拉加载更多</h1>

    </header>

    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">

        <div class="mui-scroll">

            <ul class="mui-table-view mui-table-view-chevron">

                //加载刷新的li

            </ul>

        </div>

    </div>

    <script type="text/javascript">

        mui.init({

            pullRefresh:{

                container:'#pullrefresh',

            down:{

                callback:pulldownRefresh

            },

            up:{

                contentrefresh: '正在加载...',

                callback: pullupRefresh

            }

           }

        });

        // 下拉刷新callback

        function pulldownRefresh(){

            setTimeout(function(){

                var table = document.body.querySelector('.mui-table-view');

                var cells = document.body.querySelectorAll('.mui-table-view-cell')

                for(var i = cells.length,len = i + 3;i<len;i++){//下拉刷新三个li。

                    var li = document.createElement('li');

                    li.className = 'mui-table-view-cell';

                    li.innerHTML = '<a class="mui-navigate-right">Item'+(i+1)+'</a>';

                    //下拉刷新的东西要插到最前面；

                    table.insertBefore(li,table.firstChild);

                }

                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();

            },1500);

        }

         //上拉加载callback

        var times = 0;

        function pullupRefresh() {

                setTimeout(function(){

                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++times > 2)); //参数为true代表没有更多数据了,则执行endPullupToRefresh（）方法结束上拉加载。

                    var table = document.body.querySelector('.mui-table-view');

                    var cells = document.body.querySelectorAll('.mui-table-view-cell');

                    for (var i = cells.length, len = i + 20; i < len; i++) {//上拉加载20个li

                        var li = document.createElement('li');

                        li.className = 'mui-table-view-cell';

                        li.innerHTML = '<a class="mui-navigate-right">Item' + (i + 1) + '</a>';

                        table.appendChild(li);

                    }

                },1500);

            }

            if (mui.os.plus) {

                mui.plusReady(function(){

                    setTimeout(function(){

                        mui('#pullrefresh').pullRefresh().pullupLoading();

                    },1000);

                });

            } else {

                mui.ready(function(){

                    mui('#pullrefresh').pullRefresh().pullupLoading();

                });

            }

    </script>

</body>

</html>

上个效果图：

mui框架上下拉加载的更多相关文章

  1. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

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

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

  3. mui的上拉加载更多 下拉刷新 自己封装的demo

    ----------------------------------------------- 这是一个非常呆萌的程序妹子,深夜码的丑代码------------------------------- ...

  4. MUI实现上拉加载和下拉刷新

    编写存储过程分页(此处使用T-SQL) CREATE PROC [dbo].[Common_PageList] ( @tab nvarchar(max),---表名 @strFld nvarchar( ...

  5. mui框架页面每次加载操作

    最近在优化自己用mui开发的app,主要还是针对交互这块儿,这里简单给大家说一下问题点场景,就是我是通过动态添加底部tabBar的方法创建了一个底部可以切换的操作区域,代码如下: mui.init() ...

  6. 修正mui的上拉加载和下拉刷新的一次未完成就执行下一次的请求

    有的用户会在第一次 上拉和下拉 事件未完成的时候,就执行第二次,第三次请求.... 提示文字也加上的位置动态计算,修改了mui的部份源码实现,我们的需求达到了 我们来看一下 腾讯新闻 的效果:

  7. mui 上拉加载更多的使用

    最近工作之余在用mui的框架开发,对mui了解了一些.在真正的app开发项目中,mui上拉加载模块中有两个坑,现在说一下. 1.在函数自己上拉加载行为后的回调函数 该函数是必须要写的,用来写自己的逻辑 ...

  8. mui上拉加载

    最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui ...

  9. DCloud-MUI：下拉刷新、上拉加载

    ylbtech-DCloud-MUI:下拉刷新.上拉加载 1. 下拉刷新返回顶部 0. http://dev.dcloud.net.cn/mui/pulldown/ 1. 概述 为实现下拉刷新功能,大 ...

随机推荐

  1. VBoxManage安装

    扩展包的版本需要与VirtualBox的版本一致,通过帮助可以查看VirtualBox的版本信息,然后在http://download.virtualbox.org/virtualbox/寻找对应的版 ...

  2. 小程序modal解决

    data{ shareDialog:false, } <cover-view wx:if="{{shareDialog}}" class="list_tab&quo ...

  3. 一梦江湖费六年——QQ群聊天分析

    本文结构: 一.那些年我们加过的QQ群 二.数据读入和整理(一)--来自蓝翔的挖掘机 二.数据读入和整理(二)--你不知道的事 三.聊天宏观(1)--寤寐思服 三.聊天宏观(2)日月篇 三.聊天宏观( ...

  4. box-sizing的用法（笔记）

    关于盒子布局的box-sizing的使用 border-box width 和 height 属性包括内容,内边距和边框,但不包括外边距.这是当文档处于 Quirks模式 时Internet Expl ...

  5. flex:1详解（转）

    转载自:https://blog.csdn.net/fengyjch/article/details/79047908 flex 是 flex-grow.flex-shrink.flex-basis的 ...

  6. trueStudio笔记

    1.C标准的选择 可以在项目->属性->C/C++ Build->Setting->Tool Setting->C Compiler->General中选择使用不同 ...

  7. Java线程池—ThreadPool简介

    一.Java线程池类/接口关系图及作用 Executor接口:只有一个方法execute(Runnable command),用来执行用户的任务线程. ExecutorService接口:继承自Exe ...

  8. css过渡

    过渡transition是一个复合属性 例子1 .example{ width: 200px; height: 100px; background-color: blanchedalmond; tra ...

  9. arcpy简单示例

    最好在arcmap内置python模块运行. 这里用的是Zonel Stastic as Table模块,计算各个国家的逐月径流量的统计数据.需要对数百个tiff进行计算和导出,使用arcpy可以大大 ...

  10. 2015-11-06 ajax

    一:登录页面.html 制作登录页面html后缀,是客户端控件,不能直接和后台交互,而服务端aspx可以和后台交互,所以要通过js获得内容,通过aspx和后台交互 前台: <body>   ...