mui 下拉刷新

此文提供的是mui这种下拉刷新.悬浮于页面上,比较好用.

<!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">

        <style>

            html,

            body {

                background-color: #efeff4;

            }

            .mui-pull-top-tips {

                position: absolute;

                top: -20px;

                left: %;

                margin-left: -25px;

                width: 40px;

                height: 40px;

                border-radius: %;

                z-index: ;

            }

            .mui-pull-top-wrapper {

                width: 42px;

                height: 42px;

                display: block;

                text-align: center;

                background-color: #efeff4;

                border: 1px solid #ddd;

                border-radius: 25px;

                background-clip: padding-box;

                box-shadow:  4px 10px #bbb;

                overflow: hidden;

            }

            .mui-pull-top-tips.mui-transitioning {

                -webkit-transition-duration: 200ms;

                transition-duration: 200ms;

            }

            .mui-pull-top-canvas canvas {

                width: 40px;

            }

            .mui-slider-indicator.mui-segmented-control {

                background-color: #efeff4;

            }

        </style>

    </head>

    <body>

        <header class="mui-bar mui-bar-nav">

            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

            <h1 class="mui-title">mui下拉刷新</h1>

        </header>

            <div id="slider" class="mui-slider mui-fullscreen">

                <div class="mui-slider-group">

                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">

                        <div class="mui-scroll-wrapper">

                            <div class="mui-scroll">

                                <ul class="mui-table-view">

                                    <li class="mui-table-view-cell">

                                        选项卡子项-

                                    </li>

                                    <li class="mui-table-view-cell">

                                        选项卡子项-

                                    </li>

                                    <li class="mui-table-view-cell">

                                        选项卡子项-

                                    </li>

                                    <li class="mui-table-view-cell">

                                        选项卡子项-

                                    </li>

                                    <li class="mui-table-view-cell">

                                        选项卡子项-

                                    </li>

                                </ul>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        <script src="../js/mui.min.js"></script>

        <script src="../js/mui.pullToRefresh.js"></script>

        <script src="../js/mui.pullToRefresh.material.js"></script>

        <script>

            mui.init();

            (function($) {

                //阻尼系数

                var deceleration = mui.os.ios?0.003:0.0009;

                $('.mui-scroll-wrapper').scroll({

                    bounce: false,

                    indicators: true, //是否显示滚动条

                    deceleration:deceleration

                });

                $.ready(function() {

                    //循环初始化所有下拉刷新，上拉加载。

                    $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {

                        $(pullRefreshEl).pullToRefresh({

                            down: {

                                callback: function() {

                                    var self = this;

                                    setTimeout(function() {

                                        var ul = self.element.querySelector('.mui-table-view');

                                        ul.insertBefore(createFragment(ul, index, , true), ul.firstChild);

                                        self.endPullDownToRefresh();

                                    }, );

                                }

                            },

                        });

                    });

                    var createFragment = function(ul, index, count, reverse) {

                        var length = ul.querySelectorAll('li').length;

                        var fragment = document.createDocumentFragment();

                        var li;

                        for (var i = ; i < count; i++) {

                            li = document.createElement('li');

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

                            li.innerHTML = '选项卡子项-' + (length + (reverse ? (count - i) : (i + )));

                            fragment.appendChild(li);

                        }

                        return fragment;

                    };

                });

            })(mui);

        </script>

    </body>

</html>

mui 下拉刷新的更多相关文章

  1. mui 下拉刷新和上拉加载

    <body> mui文档提供了两种不同模式的下拉刷新,具体情况看文档,链接:http://dev.dcloud.net.cn/mui/pulldown/ 单 webview 模式和 双 w ...

  2. Mui 下拉刷新，刷新完成功能实现

    Mui中,正在刷新后,就直接回弹了,没有刷新完成这个过程,然后我就在中间添加了一个过程.   代码如下:   //-----------日期格式化------------- function form ...

  3. mui下拉刷新上拉加载

    新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...

  4. mui下拉刷新 上拉加载

    a页面是父页面   b页面是子页面 在b页 html+ js+ 下拉和上拉执行的函数就不贴了 .在这个过程中还遇到了个问题就是刷新的图标偏上 需要改变其高度,需要在a页面里面去改变刷新图标的样式 本文 ...

  5. mui下拉刷新 ios click事件无法响应问题

    使用mui的事件监听事件 tap mui("#pullrefresh").on('tap', '.ulDiv', function (event) {this.click();}) ...

  6. MUI实现上拉加载和下拉刷新

    编写存储过程分页(此处使用T-SQL) CREATE PROC [dbo].[Common_PageList] ( @tab nvarchar(max),---表名 @strFld nvarchar( ...

  7. mui 单页面下拉刷新

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  9. DCloud-MUI：下拉刷新、上拉加载

    ylbtech-DCloud-MUI:下拉刷新.上拉加载 1. 下拉刷新返回顶部 0. http://dev.dcloud.net.cn/mui/pulldown/ 1. 概述 为实现下拉刷新功能,大 ...

随机推荐

  1. SharePoint 2013 新手注意事项总结[不断更新ing]

    前言 最近自己的QQ群里,经常有新加入的人,带着一些很入门的问题进行提问,这里,自己也总结总结,入门会经常碰到那些问题,希望能够带给入门的人以帮助. 1. SharePoint搭建环境 大家可以参考下 ...

  2. Log4j记录日志步骤

    记录日志对调试Bug很有帮助  亲身体会 个人习惯用Log4J,大家可以在apache网站:jakarta.apache.org/log4j 可以免费下载到Log4j最新版本的软件包. Log4j支持 ...

  3. 拖拽手势和清扫手势冲突时（UIPanGestureRecognizer和UISwipeGestureRecognizer冲突时）

    故事发生在这样的情境上:给整个控制器添加了一个拖拽手势,然后又在控制上的每个Cell上加了左滑清扫手势,然后问题来了:只有拖拽手势起作用,而左滑手势没有效果了,然后怎么解决这个问题呢!先上图: 当给整 ...

  4. Android 手机卫士--参照文档编写选择器

    本文来实现<Android 手机卫士--导航界面1的布局编写>中的图片选择器部分的代码. 本文地址:http://www.cnblogs.com/wuyudong/p/5944356.ht ...

  5. Android 手机卫士--导航界面1的布局编写

    本文地址:http://www.cnblogs.com/wuyudong/p/5943005.html,转载请注明出处. 本文实现导航界面1的布局的实现,效果如下图所示: 首先分析所使用的布局样式: ...

  6. SOA服务类项目开发模式

    开发模式 以需求用例为基,Cas e&Coding两条线并行,服务(M)&消费(VC)分离,单元.接口.功能.集成四层质量管理,自动化集成.测试.交付全程支持. 3个大阶段(需求分析阶 ...

  7. 在Asp.net MVC 3 web应用程序中，我们会用到ViewData与ViewBag，对比一下：

    Asp.net MVC中的ViewData与ViewBag ViewData ViewBag 它是Key/Value字典集合 它是dynamic类型对像 从Asp.net MVC 1 就有了 ASP. ...

  8. 鹏程网用户管理系统学习(2016-07-18 by 徐鹏)

    新的平台:X平台(x.hna.net)旧的平台:鹏程网(www.hna.net) 如今的平台情况:很多业务已经转到X平台,但也存在少量的业务还是用鹏程网的旧系统.例如**用户管理系统(也逐渐转移到易服 ...

  9. 拥抱.NET Core，如何开发跨平台的应用并部署至Ubuntu运行

    之前写了一篇博文宣布Rabbit Rpc跨平台了"拥抱.NET Core,跨平台的轻量级RPC:Rabbit.Rpc",在过程中尝试了如何编写支持跨平台的类库与应用程序,也尝试了在 ...

  10. 表单中Readonly和Disabled的区别

    1.readonly是要锁定这个控件,通过在界面上无法修改他(但是通过javascript可以修改他). 2.disabled和readonly有相同的地方也是可以锁定这个控件用户不能改变他的值,但是 ...