最近工作之余在用mui的框架开发，对mui了解了一些。在真正的app开发项目中，mui上拉加载模块中有两个坑，现在说一下。

1、在函数自己上拉加载行为后的回调函数

该函数是必须要写的，用来写自己的逻辑需求，但是一般情况下，需要设置显示为“加载更多”还是“没有更多数据了”。

看了一些博客和官方文档，基本上都把这个设置放在了定时器中

在定时器中调用获取数据的方法（自己的业务需求）

2、在mui封装的上拉加载中，点击某一项会失效。这个是真的很坑。不过网上也有解决方法。就是采用事件监听的方式，阻止默认行为

mui('选择器').on('tap','选择器',function(e){

     e.preventDefault();

    //自己的业务逻辑

})

一开始我将上述代码放在了mui.plusready()函数里面，可是事件并没有触发，所以，当我将它mui.plusready()中拿出来，事件就起作用了，我并不知道这是为什么，如果你偶尔看到这篇文章，可以告诉我一下。

我将这个使用demo放在了自己的gitHub上，网址：https://github.com/dreamITGirl/projectStudy/blob/master/html/mui%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD.html

在博客中也贴一下代码

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

    <script>

        window.onload = function () {

            /*750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是

             为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/

            getRem(750, 100)

        };

        window.onresize = function () {

            getRem(750, 100)

        };

        function getRem(pwidth, prem) {

            var html = document.getElementsByTagName("html")[0];

            var oWidth = document.body.clientWidth || document.documentElement.clientWidth;

            html.style.fontSize = oWidth / pwidth * prem + "px";

        }

    </script>

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

    <link rel="stylesheet" href="../css/reset.css"/>

    <title>关于mui的上拉加载</title>

    <style>

        .mui-content {

            background: #fff;

        }

        h2 {

            font-size: 0.28rem;

            line-height: .6rem;

            padding-left: 10px;

        }

        .mui-scroll-wrapper {

            top: .75rem;

        }

    </style>

</head>

<body>

<div class="mui-content">

    <h2>上拉加载</h2>

    <div class="mui-scroll-wrapper" id="pullRefresh">

        <div class="mui-scroll">

            <ul class="mui-table-view" id="listContainer">

                <li class="mui-table-view-cell">

                    list1

                </li>

                <li class="mui-table-view-cell">

                    list2

                </li>

                <li class="mui-table-view-cell">

                    list3

                </li>

                <li class="mui-table-view-cell">

                    list4

                </li>

            </ul>

        </div>

    </div>

</div>

<script src="../js/jquery-2.1.3.min.js"></script>

<script src="../js/mui.min.js"></script>

<script>

    (function ($, doc) {

        var listContainer = doc.getElementById('listContainer');

        mui.init({

            pullRefresh: {

                container: '#pullRefresh',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等

                up: {

                    height: 50,//可选.默认50.触发上拉加载拖动距离

                    auto: true,//可选,默认false.自动上拉加载一次

                    contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容

                    contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；

                    callback: pullfreshFunc //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

                }

            }

        });

        var flag = true, counter = 1, pageSize = 10;

        function pullfreshFunc() {

            setTimeout(function () {

                mui('#pullRefresh').pullRefresh().endPullupToRefresh(flag);//参数为true代表没有更多数据了。

                getData();

            }, 500);

        }

        function getData() {

            mui.ajax({

                type: 'get',

                url: '../json/data.json',

                data: {'counter': counter},

                success: function (response) {

                    console.log(response);

                    let list = response.peopleList;

                    let html = "";

                    flag = !(list[0] == null || list[0] == "" || !list[0]);

                    if (flag) {

                        counter++;

                    }

                    for (let i = 0; i < list.length; i++) {

                        html += '<li class="mui-table-view-cell">' + list[i].name + '</li>';

                    }

                    jQuery('#listContainer').append(html)

                },

                error: function (error) {

                    console.log(error)

                }

            })

        }

        //点击单项事件

//        mui中上拉加载中的坑1：点击事件失效(不需要放在mui.plusReady（）中)

        mui('#pullRefresh').on('tap', 'li.mui-table-view-cell', function (e) {

            e.preventDefault();

            console.log('触发点击事件了')

        })

    }(mui, document))

</script>

</body>

</html>

mui 上拉加载更多的使用的更多相关文章

  1. mui 上拉加载更多

    看起来很简单的东西,实践过程中还是出现了很多麻烦,比如上拉时,状态条跑到了顶部,因为内容没有添加到容器中,再比如下拉的回调函数使用问题,this的传递. html实现部分: <div class ...

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

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

  3. mui实现分页上拉加载更多 下拉刷新数据的简单实现 移动端下拉上拉

    空下来把mui上拉加载更多,下拉刷新数据做了一个简单的实现,希望可以帮助到需要的朋友 demo项目的结构 <!DOCTYPE html> <html> <head> ...

  4. mui 上拉加载 实现分页加载功能

    mui 上拉加载 实现分页加载功能,效果图: 分页功能(上拉加载): 1.引入需要的css.js文件 <link href="static/css/mui.css" rel= ...

  5. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  6. H5基于iScroll实现下拉刷新，上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...

  7. 常见开发需求之angular上拉加载更多

    需求   移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...

  8. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  9. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

随机推荐

  1. （转）java向MySQL插入当前时间的四种方式和java时间日期格式化的几种方法(案例说明)

    java向MySQL插入当前时间的四种方式和java时间日期格式化的几种方法(案例说明);部分资料参考网络资源 1. java向MySQL插入当前时间的四种方式 第一种:将java.util.Date ...

  2. Python解决中文字符的问题

    from __future__ import unicode_literals print(type("test")) #<type 'unicode'> Chinat ...

  3. [原]NYOJ-无线网络覆盖-199

    大学生程序代写 /*无线网络覆盖 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 我们的乐乐同学对于网络可算得上是情有独钟,他有一个计划,那就是用无线网覆盖郑州大学. 现 ...

  4. ACM学习历程—HDU5592 ZYB's Premutation（逆序数 && 树状数组 && 二分）(BestCoder Round #65 1003)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5592 题目大意就是给了每个[1, i]区间逆序对的个数,要求复原原序列. 比赛的时候2B了一发. 首先 ...

  5. bzoj 4103: 异或运算 可持久化Trie

    题目大意: 给定长度为n的数列X={x1,x2,...,xn}和长度为m的数列Y={y1,y2,...,ym},令矩阵A中第i行第j列的值\(A_{ij} = x_i \text{ xor } y_j ...

  6. 景深(Depth of Field)

    http://www.cnblogs.com/cxrs/archive/2013/03/22/DepthOfFeild.html 景深(Depth of Field) 什么是景深? 所谓景深,就是当焦 ...

  7. Sublime Text2中Evernote 插件的使用

    Sublime Text2是个强大的编辑器, 有好多插件供我们使用, 其中有个插件SublimeEvernote, 可以把代码发送到Evernote里. 但是没找见使用说明, 今天看了下Sublime ...

  8. Sublime 实践

    1.下载开发版:http://www.sublimetext.com/dev 2.安装Package control: (1)按键ctrl+~ (2)在命令行中输入:  import urllib2, ...

  9. grep的用法(转)

    grep参数 -c  : 显示匹配的行数(就是显示有多少行匹配了): -n :显示匹配内容所在文档的行号: -i  :匹配时忽略大小写: -s :错误信息不输出: -v :输出不匹配内容: -o : ...

  10. 网站跳转到Apache 2 Test Page powered by CentOS

    原来是80端口被占用的问题 解决80端口占用问题 sudo fuser -n tcp -k 覆盖原来的httpd cp /usr/local/apache2/bin/apachectl /etc/in ...