wyr123789
- 浏览: 38315 次
- 性别:
-
文章分类
- 全部博客 (57)
- Java 面试 (1)
- html5 (12)
- FQA (1)
- 前端 (18)
- java (1)
- css (7)
- 前端，js，jquery (8)
- html (2)
- jquery，html5，html (2)
- css3 (1)
- 仅包括这些 (0)
- 前端，js，jquery 有效的实时监听input (1)
- esayui (2)
- echarts3 (0)
- from (1)
- linxu (1)
- linxu apr (1)
- jsonp (1)
- 冒泡事件 (1)
- IOS click延迟300秒，ios长按点击事件会有copy的选项 (1)
- js (1)
- vue (1)
- webpack3 (1)
- sass (1)
- node (1)
最新评论
<!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">
</head>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
height:50,//可选,默认50.触发下拉刷新拖动距离,
auto: false,//可选,默认false.自动下拉刷新一次
contentdown : "下拉意义很深哦",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover : "释放皮卡丘",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
callback: pulldownRefresh//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
},
up: {
contentrefresh: '加载装备...',//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');//获取ul标签
var cells = document.body.querySelectorAll('.mui-table-view-cell');//循环获取所有的Nodelist li标签
for (var i = cells.length, len = i + 3; i < len; i++) {
//下拉刷新，新纪录插到最前面；
var li = document.createElement('li');//创建一个新的节点
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class = "mui-navigate-right">情人西施</a><img class = "mui-navigate-right" src = "img/beautiful.jpg" style="width:5rem;float: right; "/>'
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 500);
}
var count = 0;//数据的总条数
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 10; i < len; i++) {//每页十条
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item'+(i)+' <img class = "mui-navigate-right" src = "img/beautiful.jpg" style="width:5rem;float: right; "/></a>';
table.appendChild(li);
}
}, 500);
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();//重新开启上拉加载
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();//重新开启上拉加载
});
}
</script>
</body>
</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">
</head>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
height:50,//可选,默认50.触发下拉刷新拖动距离,
auto: false,//可选,默认false.自动下拉刷新一次
contentdown : "下拉意义很深哦",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover : "释放皮卡丘",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
callback: pulldownRefresh//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
},
up: {
contentrefresh: '加载装备...',//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
var table = document.body.querySelector('.mui-table-view');//获取ul标签
var cells = document.body.querySelectorAll('.mui-table-view-cell');//循环获取所有的Nodelist li标签
for (var i = cells.length, len = i + 3; i < len; i++) {
//下拉刷新，新纪录插到最前面；
var li = document.createElement('li');//创建一个新的节点
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class = "mui-navigate-right">情人西施</a><img class = "mui-navigate-right" src = "img/beautiful.jpg" style="width:5rem;float: right; "/>'
table.insertBefore(li, table.firstChild);
}
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 500);
}
var count = 0;//数据的总条数
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + 10; i < len; i++) {//每页十条
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a class="mui-navigate-right">Item'+(i)+' <img class = "mui-navigate-right" src = "img/beautiful.jpg" style="width:5rem;float: right; "/></a>';
table.appendChild(li);
}
}, 500);
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();//重新开启上拉加载
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();//重新开启上拉加载
});
}
</script>
</body>
</html>
分享到：
发表评论
-
vue 倒计时
2019-07-17 17:16 0time: 59, timer: nu ... -
input 特殊处理禁止输入特殊符号或者限制输入中文
2018-06-07 14:46 0<input class="js_input ... -
调用百度的搜索引擎
2017-09-28 11:26 0<!DOCTYPE html> <html& ... -
移动端碰到的坑
2017-09-22 15:34 695不废话 直接上代码： *{ -webkit-touch- ... -
移动端网页布局注意事项及解决
2017-08-01 17:10 11871.winphone系统a、input标签被点击时产生的半透明 ... -
全选反选
2017-05-09 18:34 481<div class="js_mobile&q ... -
js 规格多选，选中显示和还可以选择的数量 多维度选择
2017-03-17 16:09 1082<body> <section class= ... -
发送验证码
2017-03-15 15:54 0<input type="button&quo ... -
common css公共
2020-05-06 11:35 356/*遮罩层*/ .shadow{ position: fixe ... -
common 校验
2017-03-15 10:32 0/*限制只能输入数字*/ $("#username& ... -
下拉列表功能获取数据添加到select表中
2017-03-14 15:41 783<!DOCTYPE html > <html ... -
图片轮播
2017-03-09 15:56 0<!DOCTYPE html> <html ... -
功能:H5可根据输入的匹配相对应的文字下拉框
2016-08-29 15:24 598<!DOCTYPE html> <html& ... -
功能 两级联动菜单
2016-08-26 15:13 541<!DOCTYPE html> <html& ... -
功能 交替显示
2016-08-24 16:09 595<!DOCTYPE html> <html& ... -
纯CSS+CSS3右上角倾斜四十五度封页角效果
2016-08-16 17:07 4554加广告与加封页脚的代码是差不多的！ 以前封页脚都是图片现在 ... -
图形笑脸 增加动画
2016-07-21 15:23 581<!DOCTYPE html> <html& ... -
各种图形
2016-07-21 14:47 495<!DOCTYPE html PUBLIC " ... -
小用例
2016-07-20 17:24 373<!DOCTYPE html> <html& ... -
css3样式
2016-07-15 18:58 483<!DOCTYPE html> <html& ...
相关推荐
这个"MUI选项卡下拉刷新上拉加载Demo"就是利用MUI框架实现的一种典型应用场景，旨在优化数据加载，减轻服务器压力。 首先，我们来看一下`index.html`。这是整个应用的入口文件，包含了HTML结构。在这个示例中，通常...
2. 提高页面性能：Mui 上拉下拉刷新功能可以减少页面的加载时间，提高页面的性能。 3. 简洁易用：Mui 上拉下拉刷新功能使用简单易用，开发者可以轻松实现上拉下拉刷新的功能。 五、结论 Mui 上拉下拉刷新功能是一...
以上代码中，`loadTabData`函数负责加载指定选项卡的数据，而`refreshList`函数则处理下拉刷新事件，请求新的数据并更新列表。记得在实际应用中，你需要将这些功能与实际的API接口和数据模型相结合。 总结来说，本...
这是一款基于mui框架制作的选项卡切换和下拉刷新加载数据列表代码，手机移动端选项卡切换插件，触屏滑动下拉刷新代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] mui....
在本文中，我们将深入探讨如何使用MUI框架实现上拉加载更多和下拉刷新功能，并对数据进行封装处理。MUI是一款专为移动设备开发的轻量级、高性能的前端框架，提供了丰富的组件和交互效果，包括下拉刷新和上拉加载等。...
综上所述，这个压缩包中的代码示例主要展示了如何使用`mui`框架实现选项卡切换、下拉刷新加载数据列表以及上拉加载更多数据的功能。这些功能在实际的移动应用开发中非常常见，对于提升用户体验有着重要作用。通过...
使用MUI框架模拟手机端的下拉刷新和上拉加载功能 MUI框架作为一款基于HTML5plus的移动应用框架，提供了强大且灵活的解决方案，帮助开发者快速构建高品质的移动应用。其中，MUI框架的Ajax函数封装了常用的GET、POST...
`down.callback`用于定义下拉刷新的回调函数，`up.callback`则用于上拉加载的回调函数。 3. **回调函数实现**：`pulldownRefresh()`和`pullupRefresh()`是两个关键的回调函数。`pulldownRefresh()`通常用来模拟数据...
在本文中，我们将深入探讨如何在Vue.js项目中结合MUI框架实现上拉加载功能。Vue.js是一款轻量级的前端JavaScript框架，以其简洁的API和强大的功能深受开发者喜爱。而MUI则是一个针对移动设备优化的前端组件库，提供...
值得注意的是，MUI整合上拉下拉刷新功能的实现并不复杂，但前提是需要有对MUI框架和JavaScript上拉加载、下拉刷新实现方式的理解。对于初学者来说，可能需要先分别学习上拉加载和下拉刷新的独立实现，然后再将二者...
首先，`mui`框架提供了丰富的组件和API，使得开发者能够轻松实现滑动、下拉刷新、上拉加载等触摸交互功能。在"上拉加载"这一特性中，当用户滚动到页面底部时，会触发加载更多数据的事件，这对于展示大量数据的列表或...
此外，mui还支持下拉刷新和上拉加载，这对于内容较多的分类页来说非常实用。 产品列表的构建同样关键。我们可以利用mui的grid组件来布局商品卡片，实现图文并茂的产品展示。同时，mui的touch模块提供了手势识别功能...
3. 列表页利用mui的下拉刷新和上拉加载组件，实现内容的滚动加载。 4. 新闻详情页使用图片轮播组件展示多张配图，同时添加评论、分享等功能。 五、性能优化与调试 1. 对图片进行懒加载，减小首屏加载时间。 2. ...
下拉加载通常用于在用户滚动到底部时加载更多内容，而上拉刷新则是在用户上拉屏幕时更新数据。MUI框架内置了这两项功能的实现，通过简单的配置和调用，开发者可以轻松地集成到自己的应用中。 ### 3. MUI组件应用 ...
其特点包括响应式布局、快速滑动、下拉刷新、上拉加载等，非常适合构建移动Web应用。 构建聊天应用时，我们需要关注以下几个关键知识点： 1. **页面布局设计**：聊天应用通常包含消息列表和输入框两大部分。消息...
首先，我们的环境是使用HBuilder通过MUI开发APP，这种混合开发适合安卓和苹果两个平台，本次我们给大家写的代码是把上拉加载和下拉刷新单独分离开，一起来学习下。 为实现下拉刷新功能，大多H5框架都是通过DIV模拟...
它提供了一系列组件和API，简化了HTML5 App的开发流程，尤其在页面滑动、下拉刷新、上拉加载等交互效果方面表现出色。通过mui，开发者可以快速构建出流畅、响应式的移动界面，提升用户体验。 二、模板设计特点 1. ...