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. Clover 安装 Mac 系统更新 (原版黑苹果)

    关于使用原版镜像(即 .dmg )安装黑苹果的升级,笔者写写自身经验吧. 在Clover启动的界面中与Mac OS有关的启动菜单有以下这些: Boot FileVault Prebooter from ...

  2. docker run -v参数

    挂载目录(直接给例子吧) -v=[]:绑定挂载目录 宿主机绑定: -v<host>:<container>:[rw|ro] 在Docker中新建一个共享的卷: -v /< ...

  3. Vue-admin工作整理（七）：路由的切换动效

    思路就是通过 transition-group 这个组件来对多组件进行控制,效果是通过样式来写,transition-group要有指定的key值,样式中通过name来命名类的名字 <templ ...

  4. vue--动画收缩

    首先 install vuex 创建store文件夹 在 store 文件夹分别建立 state.js // 状态管理 // 定义state 原始数据 const state = { fullScre ...

  5. input[type=file]的美化

    __ 一般的选择框在美化过程中会出现各种问题,样式出错,文字无法更改等... 所有随之而生的便是这样的一种修饰方式:[将type=file的input与另一个按钮通过js绑定,这样便可以通过改变另一个 ...

  6. Struts 2 执行流程 配置信息

    Struts 2 执行流程 首先,浏览器访问,经过Filter,Filter从src/struts.xml中寻找命名空间和action的名字,获取action类,从方法中拿到返回值,接着从result ...

  7. 牛客 黑龙江大学程序设计竞赛重现 19-4-25 D

    题意: n项工作 1~n  工时s[i] ~e[i], 工时有覆盖的工作不能被同一台机器同时操作, 问完成所有工作的最少机器数 思路:前缀差分和 e.g. a            2 3 4    ...

  8. myeclipse连接mysql生成数据表时中文字符乱码或问号（解决方法）

    出现这个问题有以下三步解决思路: 1. 检查myeclipse的编码格式 windows---->Preferences---->general---->Workspace,右侧窗口 ...

  9. 虚拟机中安装Linux系统

    本教程的运行环境:Windows 10 , 虚拟机 VirtualBox,Ubuntu 16.04 1.准备 下载 VirtualBox 下载OVA镜像64位 http://releases.ubun ...

  10. 区间DP 洛谷P2858牛奶零食

    题目链接 题意:你有n个货物从1-n依次排列,每天可以从两侧选一个出来卖,卖的价格是当天的天数乘该货物的初始价格,问这批货物卖完的最大价格 输入:第一行n,之后是n个货物的初始价值 这道题不能用贪心做 ...