最近工作之余在用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. 关于phonegap的cookie

    angular搞了一半现在开始搞phonegap(确切的说应该叫cordova). 因为有很紧迫的需求,所以我也不能系统的学,只能遇到啥问题就解决啥.第一个问题就是cookie. 经过调研,cordo ...

  2. Netty组件理解（转载）

    转载的文章,写的非常好.   一.先纵览一下Netty,看看Netty都有哪些组件?        为了更好的理解和进一步深入Netty,我们先总体认识一下Netty用到的组件及它们在整个Netty架 ...

  3. linux命令学习笔记（55）：traceroute命令

    通过traceroute我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包 由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不 ...

  4. linux命令学习笔记（53）：route命令

    Linux系统的route命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两 个不同的子网之间的通信,需要一台连接两个网络的路由器, ...

  5. xxx was built without full bitcode" 编译错误解决

    xxx was built without full bitcode" 编译错误解决 iOS 打包上线 All object files and libraries for bitcode ...

  6. freeMarker（十一）——模板语言之指令

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.assign 概要 <#assign name1=value ...

  7. freeMarker（四）——模板开发指南之模板

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 模板开发指南之模板 1. 总体结构 实际上用程序语言编写的程序就是模板 ...

  8. Gym - 100851L:Landscape Improved (二分+单调性)

    题意: 一个宽度为N的网格图,i上有h[i]高的方块.现在你有W个方块,问怎么放使得最终的最高点最高.   当一个格子的下方,左下方和右下方都有方块那么久可以把方块放到这个格子上.最左端和最右端不能放 ...

  9. P1030 求先序排列

    题目描述 给出一棵二叉树的中序与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度<=8). 输入输出格式 输入格式: 2行,均为大写字母组成的字符串,表示一棵二叉树的中序与后序 ...

  10. javascript之原型prototype

    理解JavaScript原型 http://blog.jobbole.com/9648/ Web程序员应该知道的Javascript prototype原理 http://www.leonzhang. ...