mui 下拉刷新
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. 概述 为实现下拉刷新功能,大 ...
随机推荐
- Atitit 游戏的原理与概论attilax总结
Atitit 游戏的原理与概论attilax总结 1. 游戏历史2 1.1.1. 盘点PC游戏史上最重要的50款游戏2 1.1.2. 回味人类文明进程 五款经典的历史游戏2 2. 游戏类型(主要分为6 ...
- win7 由ie8升级ie11时安装不成功的一个原因
纯净win7系统更新好补丁好 升级ie一直提示不成功,之前重来没有遇到过.官方提示的解决办法: https://support.microsoft.com/zh-cn/kb/2872074 根据内容初 ...
- iOS：GCD组
组内异步会与组外顺序执行的事件争抢资源 1).创建一个组 dispatch_group_t group = dispatch_group_create(); 2).组内异步ST1,DISPATCH_Q ...
- dyld 加载 Mach-O
➠更多技术干货请戳:听云博客 前言 最近看 ObjC的runtime 是怎么实现 +load 钩子函数的实现.进而引申分析了 dyld 处理 Mach-O 的这部分机制. 1.简单分析 Mach-O ...
- 【代码笔记】iOS-UILable电子表显示
一,效果图. 二,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIVi ...
- Storm中遇到的日志多次重写问题（一）
业务描述: 统计从kafka spout中读取的数据条数,以及写入redis的数据的条数,写入hdfs的数据条数,写入kafaka的数据条数.并且每过5秒将数据按照json文件的形式写入日志.其中保存 ...
- xml类型使用注意事项
xml 的数据类型在平常的开发也是很常用的,燃鹅.也是有一些地方需要留意.今天我就分享几个测试的例子. 使用 xquery.exist (有但不仅仅限于)的注意事项.通常使用来判断节点是否存在,值是否 ...
- db2学习笔记--数据类型对表的影响
创建表的时为列选择合适的数据类型,可以提高数据库性能. 1.选择合适的数据类型,避免出现数据类型转换.例如日期,有人使用字符串来存放日期.时间戳,最后我们还要在程序中使用to_date做数据类型转换, ...
- linux的七大运行级别及级别修改
运行级别 级别说明 0 所有进程将被终止,机器将有序的停止,关机时系统处于这个运行级别 1 单用户模式,用于系统维护,只有少数进程运行,同时所有服务也不 ...
- Excel公式 提取文件路径后缀
我们在代码中获取一个文件路径的后缀,是一个很简单的事. 如C#中,可以通过new FileInfo(filePath).Extension,或者Path.GetExtension(filePath)获 ...