下拉刷新，hbuilder里可以，但安卓手机上不好使，代码如下；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<style>
</style>
<script src="js/mui.js"></script>
<!--<script src="js/jquery.js"></script>-->
<script type="text/javascript" charset="utf-8"> // (function($) {
// //阻尼系数 感觉在上拉时比较明显
// var deceleration = mui.os.ios ? 0.003 : 0.0009;
// $('.mui-scroll-wrapper').scroll({
// bounce: false,
// indicators: true, //是否显示滚动条
// deceleration: deceleration
// });
// })(mui);
mui.init({ // var h5pullDown = true;
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
/**
- 下拉刷新具体业务实现*/
function pulldownRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 500);
}
var count = 0;
/** -
上拉加载具体业务实现*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
}, 500);
}</script>
</head>
<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<div class="box"><!--</a>头部兑换商城--> <div class="header1"> <h2>兑换商城<span>X</span></h2> </div> <!--tab1--> <div class="tab1"> <nav class="mui-ba mui-bar-tab"> <a href="#" class="mui-tab-ite mui-active"> <span class="mui-tab-label" style="display: block;background:-webkit-linear-gradient(top, blue, white 90%, white);color:#fff;" name="t" onclick="is_click(0)">兑换奖品</span> </a> <a href="#" class="mui-tab-ite"> <span class="mui-tab-label" name="t" onclick="is_click(1)" style="display: block;">兑换记录</span> </a> <a href="#" class="mui-tab-ite"> <span class="mui-tab-label" name="t" onclick="is_click(2)" style="display: block;">兑换规则</span> </a> </nav> </div> <!--兑换奖品--> <div class="prize" id="pri" name="tab"> <ul class="prize_ul" style="border-radius:10px/12px;background-color: #2262ee;"> <li><a href="#" name="t1" onclick="dhjp_st(0)" style="display:block;background:-webkit-linear-gradient(top, white,blue, white);color:#fff;border-radius:10px/12px;line-height:1.1rem;">实体奖品</a></li> <li><a href="#" name="t1" onclick="dhjp_st(1)" style="display: block;">虚拟奖品</a></li> </ul> </div> </div> </div></div>
<script src="js/inde.js"></script>
</body>
</html>
3 个回复
LLgg
因为你现在是单页面下拉，调整为双页面下拉刷新就可以了，
参考这一个链接--->>>http://ask.dcloud.net.cn/question/43704
这是我的网站，O(∩_∩)O谢谢支持----->>中旋网ZxlmWeb
1***@qq.com (作者) - 成熟稳重 人之巅峰 90后
谢谢，单页面为什么不能下拉刷新呢
wen如故i
单页也是可以实现上拉下拉的，具体查看hbulider创建的mui案例，打开examples文件夹中的pullrefresh_with_tab.html。
自己的页面要加上该tab页上的css，引入<script src="../js/mui.pullToRefresh.js"></script><script src="../js/mui.pullToRefresh.material.js"></script>这两个css，如果下拉圆圈会在title上面，设置.mui-bar z-index值