最近工作之余在用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. POJ 3349 Snowflake Snow Snowflakes（哈希表）

    题意:判断有没有两朵相同的雪花.每朵雪花有六瓣,比较花瓣长度的方法看是否是一样的,如果对应的arms有相同的长度说明是一样的.给出n朵,只要有两朵是一样的就输出有Twin snowflakes fou ...

  2. Java_注解_异常_01_ElementType cannot be resolved to a variable

    一.异常现象: 自定义注解时, @Retention和@Target都能导入进来,但是却报下列错误: RetentionPolicy cannot be resolved to a variable ...

  3. 【leetcode刷题笔记】String to Integer (atoi)

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  4. 图的Tarjan算法

    “Tarjan有三种算法 你们知道吗”——Tar乙己 void tarjan(int x) { low[x]=dfn[x]=++ind; q[++top]=x;mark[x]=; for(int i= ...

  5. 【LeetCode】080. Remove Duplicates from Sorted Array II

    题目: Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For ex ...

  6. 用NodeJS打造多人在线聊天室（NodeJS & SocketIO & Express & EJS & MongoDB & Gulp）

    项目背景 这个项目主要是为了玩玩NodeJS,项目的方向大概是做出类似QQ的在线聊天系统.想要在线体验可以点击在线演示. 项目使用PM2进行部署和管理,功能在不断的迭代开发中.如果你觉得这个项目比较有 ...

  7. 使用IronPython集成Python和.NET

    本文由 伯乐在线 - 艾凌风 翻译,Daetalus 校稿.未经许可,禁止转载!英文出处:www.informit.com.欢迎加入翻译组. 从两个优秀的世界各取所需,更高效的复用代码.想想就醉了,. ...

  8. java静态方法(变量)、非静态方法(变量)区别

    java静态方法.静态变量在调用时生成唯一标识,即在内存中给定一个静态位子,这样在调用时可以直接找到,而且会节省内存.但如果声明的静态方法.静态变量过多,会占用过多内存,有可能导致内存溢出. 非静态方 ...

  9. JAVAset容器基本知识

    import java.io.PrintWriter; import java.util.HashSet; import java.util.Scanner; import java.util.Ite ...

  10. SpringSecurity01 SpringSecurity环境搭建

    版本说明: JDK -> java version "1.8.0_101" MAVEN -> Apache Maven 3.5.0 IDEA -> 2017.2. ...