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. 20165306 Exp1 PC平台逆向破解

    20165306 Exp1 PC平台逆向破解 一.逆向及Bof基础实践说明 1. 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,fo ...

  2. adb常用命令（转）

    1.Android Debug Bridge -adb常用命令 1.1简介 Android Debug Bridge,我们一般简称为adb,主要存放在sdk安装目录下的platform-tools文件 ...

  3. 一、Java JUC简介

    在 Java 5.0 提供了 java.util.concurrent (简称JUC )包,在此包中增加了在并发编程中很常用的实用工具类,用于定义类似于线程的自定义子系统,包括线程池.异步 IO 和轻 ...

  4. HADOOP高可用机制

    HADOOP高可用机制 HA运作机制 什么是HA HADOOP如何实现HA HDFS-HA详解 HA集群搭建 目标: 掌握分布式系统中HA机制的思想 掌握HADOOP内置HA的运作机制 掌握HADOO ...

  5. particular.js

    参数 键值 参数选项/ 说明 实例 particles.number.value number   数量 40 particles.number.density.enable boolean    t ...

  6. HOMER | MEME | 转录因子的靶基因预测

    Finding Enriched Motifs in Genomic Regions (findMotifsGenome.pl) 在指定区域做motif enrichment,大大降低了假阳性. ME ...

  7. Mac安装6.1.2版本Elasticsearch及优化配置实践

    1,Mac上安装(指定java8) brew cask install java8 vim .base_profile 文件内容: JAVA_HOME=/Library/Java/JavaVirtua ...

  8. JSON & XML

    什么是JSON? JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子 ...

  9. SYN-flood攻击

    原理:当TCP三次握手进行第一次握手时,客户端向服务端发送SYN请求报文,第二次握手服务端会返回一个SYN+ACK的一个确认报文,syn-flood攻击就发生在第三次握手,当客户端不去回应服务端的SY ...

  10. 《BUG创造队》第二次团队作业：团队项目选题报告

    项目 内容 这个作业属于哪个课程 2016级软件工程 这个作业的要求在哪里 实验六 团队作业2:团队项目选题 团队名称 BUG创造队 作业学习目标 可行性自评总结,并且采用NABCD方法进行项目初步分 ...