使用mui.js实现下拉刷新

闲聊：

最近因公司项目需求，小颖需要写一些html5页面，方便公司IOS和Android给APP中嵌套使用，其中需要实现拉下刷新功能，其实就是调用了一下mui.js就可以啦嘻嘻，下面跟着小颖一起来看看具体是怎么实现的吧.

效果图：

mui.min.js、mui.min.css和jquery-3.3.1.js 小颖就不粘贴啦，大家在网上百度下载下来就可以啦嘻嘻，小颖就把default.css和index.html文件粘贴出来哦。

default.css

* {

    margin:;

    padding:;

    border:;

}

html,

body,

.view-container {

    height: 100%;

    font-family: PingFangSC-Medium;

}

.bg {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    display: none;

    position: absolute;

    top:;

    left:;

    background-color: rgba(0, 0, 0, 0.5);

    z-index:;

}

.bg .loading {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 5px solid #BEBEBE;

    border-left: 5px solid #498aca;

    animation: load 1s linear infinite;

    -moz-animation: load 1s linear infinite;

    -webkit-animation: load 1s linear infinite;

    -o-animation: load 1s linear infinite;

}

@-webkit-keyframes load {

    from {

        -webkit-transform: rotate(0deg);

    }

    to {

        -webkit-transform: rotate(360deg);

    }

}

@-moz-keyframes load {

    from {

        -moz-transform: rotate(0deg);

    }

    to {

        -moz-transform: rotate(360deg);

    }

}

@-o-keyframes load {

    from {

        -o-transform: rotate(0deg);

    }

    to {

        -o-transform: rotate(360deg);

    }

}

.top-title {

    background: url(../images/2.jpg) no-repeat center;

    background-size: cover;

    width: 100%;

    height: 350px;

}

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Hello MUI</title>

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

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

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

</head>

<body>

<!--下拉刷新容器-->

<div id="pullrefresh" class="mui-content mui-scroll-wrapper">

    <div class="mui-scroll">

        <div class="top-title"></div>

        <!--数据列表-->

        <ul class="mui-table-view mui-table-view-chevron" id="dataList"></ul>

    </div>

</div>

<div class="bg">

    <div class="loading"></div>

</div>

<script src="./js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

<script src="./js/mui.min.js" type="text/javascript" charset="utf-8"></script>

<script>

    // //进度显示

    $('.bg').css('display', 'flex');

    mui.init({

        pullRefresh: {

            container: '#pullrefresh',

            down: {

                style: 'circle',

                callback: pulldownRefresh

            },

            // up: {

            //     auto:true,

            //     contentrefresh: '正在加载...',

            //     callback: pullupRefresh

            // }

        }

    });

    var count = 0;

    function pullupRefresh() {

        setTimeout(function () {

            getDt('default');

        }, 1500);

    }

    pullupRefresh();

    function addData() {

        getDt('down');

    }

    /**

     * 下拉刷新具体业务实现

     */

    function pulldownRefresh() {

        setTimeout(function () {

            if (count < 3) {

                addData();

                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();

                mui.toast("为你推荐了5篇文章");

            } else {

                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();

                mui.toast("没有更多数据了");

            }

        }, 1500);

    }

    function getDt(ways) {

        count++;

        var table = document.body.querySelector('.mui-table-view');

        var cells = document.body.querySelectorAll('.mui-table-view-cell');

        var len;

        if (ways == 'default') {

            var newCount = cells.length > 0 ? 5 : 10;//首次加载10条，满屏

            for (var i = cells.length, len = i + newCount; i < len; i++) {

                var li = document.createElement('li');

                li.className = 'mui-table-view-cell';

                li.innerHTML = '<a class="mui-navigate-right" href="http://www.cnblogs.com/yingzi1028">Item ' + (i + 1) + '</a>';

                table.appendChild(li);

            }

        }

        if (ways == 'down') {

            for (var i = cells.length, len = i + 5; i < len; i++) {

                var li = document.createElement('li');

                li.className = 'mui-table-view-cell';

                li.innerHTML = '<a class="mui-navigate-right" href="http://www.cnblogs.com/yingzi1028">Item ' + (i + 1) + '</a>';

                //下拉刷新，新纪录插到最前面；

                table.insertBefore(li, table.firstChild);

            }

        }

        //进度隐藏

        $('.bg').css('display', 'none');

    }

    mui('body').on('tap', 'a', function () {

        window.top.location.href = this.href;

    });

    $('a').ontouchstart = function (e) {

        e.preventDefault();

    };

</script>

</body>

</html>

git地址：https://gitee.com/lucy1028/muiTest

使用mui.js实现下拉刷新的更多相关文章

vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
解决：mui 的选项卡 + 下拉刷新功能，在其中嵌入 iframe 后，在 iphone 的情况下，iframe 的内容不能滚动，只显示第一屏内容。
我所遇到的情况是,使用 mui 的选项卡 + 下拉刷新功能时,其中有2个页面是嵌入了别的网站的页面,而别个几个是通过 ajax 加载本网站的数据.然后在其中嵌入 iframe 后,在 iphon ...
MUI 选项卡切换+下拉刷新动态完整实现一例
前台最终呈现的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
mui 单页面下拉刷新
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
基于iscroll.js实现下拉刷新和上拉加载特效
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...
mui前端框架下拉刷新分页加载数据
前台 mui.init(); (function($) { //阻尼系数 var deceleration = mui.os.ios?0.003:0.0009; $('.mui-scroll-wrap ...
js的下拉刷新和上拉加载，基于iScroll v4.2.5
html部分 <div id="wrapper" style="height: 100%"> <div id="scroller&q ...
原生js模仿下拉刷新功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
手机端原生js实现下拉刷新数据
HTML结构如下: <div class="outerScroller comment"> <div class='scroll comment'> < ...

随机推荐

[转]delphi 有授权许可的字符串拷贝函数源码
一段看上去“貌不惊人”的Delphi插入汇编代码,却需要授权许可,但是与经典的同类型函数比较,确实“身手不凡”. 研究代码的目的在于借鉴,本文通过分析,并用C++重写代码进行比较,再次证明这段代码效率 ...
iOS：针对固定数据源，更好的封装cell
一.介绍在iOS开发中,tableView非常常用,能将其展示出来,它的数据源必不可少.当然数据源有动态下发的,有固定写死的,这里我只探讨固定写死的情况.对于死数据,我们在项目中经常遇到的场景就是我 ...
了解 JavaScript （3）- 马上开始
之前演示了一个 Hello World 程序,而后讲解了一些基础概念,下面开始一些基础工作. 将脚本放在哪里脚本可以放置在两个位置 <head></head>之间,头脚本(h ...
Dubbo的使用入门
一.包引入 1.父模块pom.xml中加入依赖:  <dependency> <groupId>com.alibaba.boot< ...
Gson解析第三方提供Json数据（天气预报，新闻等）
之前都是自己写后台,自己的server提供数据给client. 近期在看第三方的数据接口,訪问其它站点提供的信息.比方.我们可能自己收集的数据相当有限.可是网上提供了非常多关于天气预报.新闻.星座运势 ...
QT程序打包发布
本来感觉这是一个简单的操作,今天看见群里有人在问这个问题,他说网上查了很多都不成功,突然就想把自己初学的时候记录一下! 题目谢了QT程序的打包发布,那就是两步骤:打包+发布! 注释:这篇博文用的是Qt ...
C语言判断文件夹或者文件是否存在的方法【转】
C语言判断文件夹或者文件是否存在的方法方法一:access函数判断文件夹或者文件是否存在函数原型: int access(const char *filename, int mode); 所 ...
android的activity被杀死后如何重启
最近公司的大屏展示机器人上的程序运行时间长了,比如五天,十天会出现偶尔的崩溃,查日志可能是内存溢出或者是ndk层的错误,这种错误一时也不太好查找,但是产品那边有个要求就是程序退出了一定要能重启,能抓日 ...
Cortex-A15架构解析：它为什么这么强(转)
今年的新手机趋势无异是全面向四核靠拢,不过同样是四核,在实际的性能上其实是千差万别.例如针对入门级主流市场的四核手机普遍采用的都是Cortex-A7以及 Cortex-A9 级别的CPU内核,这类内核 ...
【Spark 深入学习 01】 Spark是什么鬼？
经过一段时间的学习和测试,是时候给spark的学习经历做一个总结了,对于spark的了解相对晚了写.春节期间(预计是无大事),本博准备推出20篇左右spark系列原创文章(先把牛吹出去再说) ,尽量将 ...