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. poj1676

    保存不完整数字可能对应的数字,注意小时<24,分钟小于59. AC代码 #include <stdio.h> #include <vector> using namesp ...

  2. Codeforces 803C. Maximal GCD

    题目链接:http://codeforces.com/contest/803/problem/C 中了若干trick之后才过... k个数的严格递增序列最小权值和就是${n*(n+1)/2}$,枚举这 ...

  3. 学习笔记74—函数argsort()

    ****************************************************** 如有谬误,请联系指正.转载请注明出处. 联系方式: e-mail: heyi9069@gm ...

  4. CDH5.16.1集群新增节点

    如果是全新安装集群的话,可以参考<Ubuntu 16.04上搭建CDH5.16.1集群> 下面是集群新增节点步骤: 1.已经存在一个集群,有两个节点 192.168.100.19 hado ...

  5. jmeter实践之数据库参数传递

    一.需求: 1.业务需求:根据手机号到数据库中查看用户id,再根据用户id查看该注册用户下关联的健康成员. 2.参数化分析 1)需要根据不同的手机号进行查询,所以手机号需要进行参数化 2)用户id要作 ...

  6. 保密数据!泽宝曝光各个主要店铺收入 核心SKU数量少得惊人

    今年跨境电商圈的一大并购,上市公司星徽精密并购知名跨境电商大卖家泽宝股份正在进程中.星徽精密在向证监会行政许可项目审查回复中,披露了泽宝股份众多保密数据,揭开了泽宝股份众多经营关键点,值得跨境电商卖家 ...

  7. mac上运行window程序。

    wine https://wiki.winehq.org/Wine_User%27s_Guide#Quick_start #使用brew brew install Caskroom/cask/xqua ...

  8. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  9. 微信跳转外部浏览器下载app

    很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接和下载APP,其实这并不难,只要我们实现微信跳转功能即可.下面给大家介绍这个功能 方案实现教程:http://sk ...

  10. mybatis注解调用存储过程

    mapper @SelectProvider(type = RoleMenuSqlProvider.class,method = "updateRoleMenuRelation") ...