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. 概述 为实现下拉刷新功能,大 ...
随机推荐
- GJM : Unity3D HIAR -【 快速入门 】 六、导出 iOS 工程
导出 iOS 工程 在开始之前,请务必先保存您的工程.由于 Unity 无法直接生成 ipa 文件,您需要先导出 iOS 工程文件,然后通过 Xcode 编译生成. Step 1. 选择平台 在 Un ...
- 9.2.1 .net framework下的MVC 控件的封装（上）
在写.net core下mvc控件的编写之前,我先说一下.net framework下我们MVC控件的做法. MVC下控件的写法,主要有如下三种,最后一种是泛型的写法,mvc提供的控件都是基本控件. ...
- System.nanoTime与System.currentTimeMillis的理解与区别
System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. 平时产生随机数时我们经常拿时间做种子,比如用System.currentTimeMillis的结果 ...
- 你知道JavaScript中的结果值是什么吗？
你知道JavaScript中的每条语句.甚至表达式都有一个结果值吗? 当你在浏览器中测试代码时,经常会在控制台的输出结果的最后面多出一条,大部分为undefined,这个undefined就是一个结果 ...
- JavaScript学习笔记1之基础知识点
一.什么是JavaScrip JavaScript是一种动态类型.弱类型.基于原型的客户端脚本语言.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,在HTML网页 ...
- MPAndroidChart 3.0——LineChart（折线图）
显示效果 MPAndroidChart每一种图表的基本使用方式都基本相同 了解一种图表的实现 参考项目源码其他的图表也就差不多哩 在布局文件中定义 <com.github.mikephil.ch ...
- Google C++单元测试框架GoogleTest---GMock的CheatSheet文档
CheatSheet文档中包含了GMock所有常用的东西,看了这个基本上就可以用它了,本文接上篇博文:Google C++单元测试框架GoogleTest---Google Mock简介--概念及基础 ...
- 当Eclipse报版本低时的处理方法
http://blog.sina.com.cn/s/blog_6f0c85e10100v6pv.html 更新到API12的时候出过问题,这一次难免又会出现了,不过我的版本还真全啊,哇咔咔~ 这里 ...
- 初识java之String与StringBuffer（上）
好久没写博客了,一直在纠结后面的路怎么发展?好了不说废话了!!正题开始!! String与StringBuffer类是我们在开发中最常用的,我们现在一起来分析一下这两个类,首先我们先来谈谈String ...
- .htaccess添加Header set Cache-Control报错500
在优化网站开启站点的图片缓存时,需要在.htaccess文件中加入: #文件缓存时间配置10分钟 <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf ...