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 下拉刷新的更多相关文章

mui 下拉刷新和上拉加载
<body> mui文档提供了两种不同模式的下拉刷新,具体情况看文档,链接:http://dev.dcloud.net.cn/mui/pulldown/ 单 webview 模式和双 w ...
Mui 下拉刷新，刷新完成功能实现
Mui中,正在刷新后,就直接回弹了,没有刷新完成这个过程,然后我就在中间添加了一个过程. 代码如下: //-----------日期格式化------------- function form ...
mui下拉刷新上拉加载
新外卖商家端主页订单大厅页面使用mui双webview,实现下拉刷新上拉加载主页面: order_index.html <!doctype html> <html> < ...
mui下拉刷新上拉加载
a页面是父页面 b页面是子页面在b页 html+ js+ 下拉和上拉执行的函数就不贴了 .在这个过程中还遇到了个问题就是刷新的图标偏上需要改变其高度,需要在a页面里面去改变刷新图标的样式本文 ...
mui下拉刷新 ios click事件无法响应问题
使用mui的事件监听事件 tap mui("#pullrefresh").on('tap', '.ulDiv', function (event) {this.click();}) ...
MUI实现上拉加载和下拉刷新
编写存储过程分页(此处使用T-SQL) CREATE PROC [dbo].[Common_PageList] ( @tab nvarchar(max),---表名 @strFld nvarchar( ...
mui 单页面下拉刷新
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
DCloud-MUI：下拉刷新、上拉加载
ylbtech-DCloud-MUI:下拉刷新.上拉加载 1. 下拉刷新返回顶部 0. http://dev.dcloud.net.cn/mui/pulldown/ 1. 概述为实现下拉刷新功能,大 ...

随机推荐

sql case when...then...else...end 选择判断
达到的需求为: 吓数收回日期为空:当接单日期不等于空和当天减接单日期大于3天时,为1,否则为0:当接单日期为空.最大发织交期不等于空和当天减去最大发织交期大于3天时,为1,否则为0:当接单日期和发织交 ...
Android中的自定义控件（一）
自定义控件是根据自己的需要自己来编写控件.安卓自带的控件有时候无法满足你的需求,这种时候,我们只能去自己去实现适合项目的控件.同时,安卓也允许你去继承已经存在的控件或者实现你自己的控件以便优化界面和创 ...
Cell右滑多个编辑选项栏
简单粗暴,一看就能明白关于右滑cell,能滑出来两个以上的选项栏,可以如下这么做,但是要注意下面的注意事项,就是关于iOS8前后的问题,注释写的很清楚了.可以直接复制到自己的代码里看的会更明白. / ...
iOS项目iCloud及CloudKit Dashboard运用
CloudKit是苹果推出的基于iCloud的一个云端数据存储服务.其主要由下面两部分组成: 一个仪表web页面,用于管理公开数据的记录类型. 一组API接口,用于iCloud和设备之间的数据传递. ...
Python的模块引用和查找路径
模块间相互独立相互引用是任何一种编程语言的基础能力.对于“模块”这个词在各种编程语言中或许是不同的,但我们可以简单认为一个程序文件是一个模块,文件里包含了类或者方法的定义.对于编译型的语言,比如C#中 ...
[笔记]ubuntu安装flashplayer
为firefox安装: 下载tar.gz压缩包:http://get.adobe.com/cn/flashplayer/ 解压:tar -xvxf install_flash_player_11_li ...
__dbg.h
#ifndef __HSS_DBG_HSS__ #define __HSS_DBG_HSS__ /*************************************************** ...
Windows7 忘记密码的解决办法
由于无法使用管理员帐号进入Windows 7,辅助工具比较大,已经回不到xp时代的pe一键删除密码了,不过用Windows 7的system账户运行cmd命令可以强制修改账户密码!就拿xp+Windo ...
MySql存储过程
MySQL 存储过程 ```sql CREATE PROCEDURE myprocedure (IN para01 INTEGER) BEGIN DECLARE var01 CHAR(10); IF ...
Markdown简介以及常用语法
Markdown简介以及常用语法最近发现用markdown记录东西很方便,感觉和emacs的org mode很类似,但是windows下使用emacs不是很方便.特此记录一下markdown常用的语 ...

mui 下拉刷新

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

随机推荐

热门专题