小程序下拉刷新步骤：
如需所有的页面都实现下拉刷新的话，那需要在全局文件app.json里的window里设置enablePullDownRefresh这个属性(与步骤1设置一样)。
完成以上步骤就可实现下拉刷新了~
ios端，页面无法下拉刷新(就是根本下拉不了，触发不了事件)。只有当右侧的滚动条滚动到底部后，再下拉刷新时才有效果。安卓端是没有问题的。
但是，开发者工具上测试一直都是没有问题的。
问题的原因：
是 因为在首页上父元素用到了绝对定位( position: fixed)，导致了ios端无法下拉刷新 ，把绝对定位改为相对定位就可以了(position: relative)。
1、方法一：将fixed定位的内容移出 滚动视图外2、方法二：在使用position:fixed的元素上加上transform: translateZ(0)
问题结构
方法一：
方法二：
如何解决：查阅资料之后想到一下几种解决方法
1，使用position：absolute模拟
<script type="text/javascript">
window.onscroll=function(){
$(".fixed").css("top",$(window).scrollTop())
$(".foot").css("top",$(window).scrollTop()+$(window).height())
}
</script>
问题来了：滑动页面时头部底部div会有明显的抖动。
2，判断当前获得焦点元素是input则隐藏div改为position：absolute
<body onload=setInterval("a()",500)>
<script type="text/javascript">
function a(){
if(document.activeElement.tagName == 'INPUT'){
$(".fixed").css({'position': 'absolute','top':'0'})
} else {
$(".fixed").css('position', 'fixed')
}
}
</script>
问题来了:不停监控dom，消耗资源。如果input个数较少，可在input里面添加onfocus事件好一些。但是如果是底部固定div此方法好像不太给力。
3，插件iscroll.js个人感觉不是很好用。可能方法不对，jQuery
Mobile 没尝试，感觉会增负担。
4，重点来了：
只需要在中间部分外层div添加css样式position:fixedtop:50pxbottom:50pxoverflow:scroll就可以实现效果，无需插件。可拷贝下面代码运行。
<!DOCTYPE html>
<html lang="zh_cmn">
<head>
<meta charset=utf-8 />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title></title>
<style>
.head,.foot{position:fixedleft:0height:38pxline-height:38pxwidth:100%background-color:#99CC00}
.head{top:0}
.foot{bottom:0}
.main{position:fixedtop:38pxbottom:38pxwidth:100%overflow:scrollbackground-color:#BABABA}
</style>
</head>
<body>
<header class="head">顶部固定区域</header>
<article class="main" id="wrapper">
<div>
资料由：成都点点通软件开发公司提供！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）