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. python笔记--socket编程

    socket编程 osi七层模型 socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族 ...

  2. DataTable2JSON 和 DataTable2Class 性能比较

    DataTable 用 5000行和50000行数据做测试,得出转class效率貌似高一点点,不过优化并不大,还是 sql ,网络请求方面做优化比较显著. jobject 2019-03-07 06: ...

  3. ubuntu使用抓包工具，charles

    参考官网:https://www.charlesproxy.com/documentation/installation/apt-repository/ wget -q -O - https://ww ...

  4. scrapy数据存储在mysql数据库的两种方式

    方法一:同步操作 1.pipelines.py文件(处理数据的python文件) import pymysql class LvyouPipeline(object): def __init__(se ...

  5. 『计算机视觉』YOLO系列总结

    网络细节资料很多,不做赘述,主要总结演化思路和解决问题. 一.YOLO 1.网络简介 YOLO网络结构由24个卷积层与2个全连接层构成,网络入口为448x448(v2为416x416),图片进入网络先 ...

  6. requests库/爬取zhihu表情包

    先学了requests库的一些基本操作,简单的爬了一下. 用到了requests.get()方法,就是以GET方式请求网页,得到一个Response对象.不加headers的话可能会400error所 ...

  7. springcloud-spring cloud config统一配置中心

    统一配置中心 为什么需要统一配置中心? 统一配置中心顾名思义,就是将配置统一管理,配置统一管理的好处是在日后大规模集群部署服务应用时相同的服务配置一致,日后再修改配置只需要统一修改全部同步,不需要一个 ...

  8. 【算法】祭奠spfa 最短路算法dijspfa

    题目链接 本题解来源 其他链接 卡spfa的数据组 题解堆优化的dijkstra 题解spfa讲解 来自以上题解的图片来自常暗踏阴 使用前向星链表存图 直接用队列优化spfa struct cmp { ...

  9. Linux getopt/getopts解析命令行参数教程

    一.说明 shell中获取参数可以直接使用$1.$2等形式来获取,但这种方式有明显的限制:每个参数的位置是固定的.比如如果在设计上$1是ip地址$2是端口,那在执行时就必须第一个参数是ip第二个参数是 ...

  10. vue2.0自学笔记

    前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁 二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 ...