<div class="content" id="refreshContainer">
<span class="refreshText" style="display:none;text-align:center;width:100%;" id="refreshTextid"></span>
</div>
<script type="text/javascript">
(function(window) {
var _element = document.getElementById('refreshContainer'),
_refreshText = document.querySelector('.refreshText'),
_startPos = 0,
_transitionHeight = 0;
_element.addEventListener('touchmove', function(e) {
console.log('当前位置:', e.touches[0].pageY);
_transitionHeight = e.touches[0].pageY - _startPos;
if (_transitionHeight > 0 && _transitionHeight < 100) {
_refreshText.innerText = '下拉刷新';
_element.style.transform = 'translateY('+_transitionHeight+'px)';
if (_transitionHeight > 55) {
_refreshText.innerText = '释放更新';
}
}
}, false);
_element.addEventListener('touchend', function(e) {
_element.style.transition = 'transform 0.5s ease 1s';
_element.style.transform = 'translateY(0px)';
document.getElementById('refreshTextid').style.display="block";
_refreshText.innerText = '更新中...';
window.location.reload(true);
}, false);
})(window);
</script>