最近工作之余在用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. 造成segmentation fault的可能原因分析

    一 造成segment fault,产生core dump的可能原因 1.内存访问越界 a) 由于使用错误的下标,导致数组访问越界 b) 搜索字符串时,依靠字符串结束符来判断字符串是否结束,但是字符串 ...

  2. 更新github上代码

    前面一篇已经实现首次上传代码到github了,本篇继续讲如何把本地更新的代码同步更新到github上 一.clone代码 1.把大神的代码clone到本地,或者clone自己github上的代码,使用 ...

  3. Python TCP通信网络编程

    最近在看廖雪峰老师的基础教程(http://www.liaoxuefeng.com/),今天实现了一下简单Python的Socket的网络编程. 1. Socket网络编程 Socket是网络编程的一 ...

  4. python实现列队

    1 列队定义 队列是项的有序结合,其中添加新项的一端称为队尾,移除项的一端称为队首.当一个元素从队尾进入队列时,一直向队首移动,直到它成为下一个需要移除的元素为止. 最近添加的元素必须在队尾等待.集合 ...

  5. ACM学习历程—BZOJ2956 模积和（数论）

    Description 求∑∑((n mod i)*(m mod j))其中1<=i<=n,1<=j<=m,i≠j. Input 第一行两个数n,m. Output 一个整数表 ...

  6. bzoj 3924 幻想乡战略游戏 —— 动态点分治

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3924 参考了博客:https://blog.csdn.net/qq_34564984/art ...

  7. bzoj 4066 & bzoj 2683 简单题 —— K-D树(含重构)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4066 https://www.lydsy.com/JudgeOnline/problem.p ...

  8. 【转】 Pro Android学习笔记（四十）：Fragment（5）：适应不同屏幕或排版

    目录(?)[-] 设置横排和竖排的不同排版风格 改写代码 对于fragment,经常涉及不同屏幕尺寸和不同的排版风格.我们在基础小例子上做一下改动,在横排的时候,仍是现实左右两个fragment,在竖 ...

  9. linux下dns设置详解

    DNS就是Domain Name System,它能够把形如www.21php.com这样的域名转换为211.152.50.35这样的IP地址;没有DNS,浏览21php.com这个网站时,就必须用2 ...

  10. numpy.ones(shape, dtype=None, order='C')

    Return a new array of given shape and type, filled with ones. Parameters: shape : int or sequence of ...