最近工作之余在用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. PL/SQL学习笔记_02_游标

    在 PL/SQL 程序中,对于处理多行记录的事务经常使用游标来实现. 为了处理 SQL 语句, ORACLE 必须分配一片叫上下文( context area )的区域来处理所必需的信息,其中包括要处 ...

  2. LiveMediaStreamer

    LiveMediaStreamer is an open source multimedia framework that allows the manipulation of multiple au ...

  3. 2017-2018-1 20179215《Linux内核原理与分析》第八周作业

    实验:ELF文件格式与程序的编译链接 一.可执行文件的创建  从源代码到可执行程序所要经历的过程概述:  源代码(.c .cpp .h)经过c预处理器(cpp)后生成.i文件,编译器(cc1.cc1p ...

  4. 为啥要去IOE——分布式架构的由来

    1946年2.14日,那是一个浪漫的情人节 , 世界上第一台电子数字计算机在美国宾夕法尼亚大学诞生了,她的名字叫ENIAC.这台计算机占地170平米.重达 30 吨,每秒可以进行 5000 次加法运算 ...

  5. 白话算法(6) 散列表(Hash Table)从理论到实用（上）

    处理实际问题的一般数学方法是,首先提炼出问题的本质元素,然后把它看作一个比现实无限宽广的可能性系统,这个系统中的实质关系可以通过一般化的推理来论证理解,并可归纳成一般公式,而这个一般公式适用于任何特殊 ...

  6. Parallel Programming-Paralle.For && ForEach

    本文主要介绍Parallel.For以及Parallel.ForEach.Parallel.For是普通步长为1的for循环的并行代替方案.Parallel.ForEach是以集合为基准进行循环的fo ...

  7. 3DES加密/解密

    /// <summary> /// C#/PHP/JSP 3DES 加密与解密(只支持UTF-8编码) /// </summary> public class Crypto3D ...

  8. Java探索之旅(2)——GUI输入输出与代码的规范性

    1.知识点概叙 ① 定名常量:关键字final,类似C++ const定义,一般用大写:final double PI=3.1415926 ② 5/2=2:5.0/2=2.5://通常意义的除法,至少 ...

  9. 浏览器默认标签样式总结及css初始化程序

    html中的大部分的标签都有一些糟糕的样式,有的是标签天然自带的,有的是浏览器默认设置的,我们在写网页时,这些默认的样式就会时不时的跳出来捣一下乱,搞得我们很是无奈.所以成手在写css样式时,一般都会 ...

  10. 树莓派 Learning 002 装机后的必要操作 --- 07 设置静态IP地址

    树莓派 装机后的必要操作 之 设置静态IP地址 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 为了避免IP变来变去,我们将IP地址设置为静 ...