';//然后将创建的div插入到主页面前面body[0].insertBefore(newItem,dom[0]);//获取创建的下拉刷新divvardom2=document.getElementsByClassName('slide-wrap');//运行slide_start()this.slide_start(dom2);}}下图为下拉刷新的css样式：(3)编写slide_start()函数slide_start:function(dom2){var_this=this;//监听整个文档的touchstart事件document.addEventListener('touchstart',function(evt){vartouch=evt.touches[0];//获取第一个触摸点_this.start_y=Number(touch.pageY);//第一个触摸点的Y坐标});//运行slide_move_this.slide_move(dom2);}(4)编写slide_move()functionslide_move:function(dom2){var_this=this;//监听文档的touchmove事件document.addEventListener('touchmove',function(evt){//下面这行代码是保证手指在距离内移动，当达到指定长度时，不会显示'清爽..'dom2[0].childNodes[0].style.display='none';vartouch=evt.touches[0];//获取第一个触摸点//获取手指向下移动的长度_this.end_y=Number(touch.pageY)-_this.start_y;//判断手指移动距离是否大于5，为什么这里设置为5而不是0？主要是为了避免用户轻微滑动if(_this.end_y>5){//当滑动距离大于5时，会显示'下拉刷新'的效果，并为其分配高度作为手指滑动的距离，实现慢慢下拉的效果dom2[0].childNodes[1].style.display='block';dom2[0].childNodes[1].style.height=_this.end_y+'px';dom2[0].childNodes[1].style.lineHeight=_this.end_y+'px';}});//执行slide_end()函数this.slide_end(dom2);}(5)编写slide_end()函数slide_end:function(dom2){var_this=this;//监听touchend事件文档。addEventListener('touchend',function(evt){//手指送走时，如果判断手指滑动距离大于100，则'刷新..'显示效果，同时隐藏'下拉刷新'的效果if(_this.end_y>100){dom2[0].childNodes[1].style.display='none';dom2[0].childNodes[0].style.display='块';console.log('开始刷新');//这里是模拟3秒后刷新成功，然后hide'refreshing..'EffectsetTimeout(function(){dom2[0].childNodes[0].style.display='none';},3000);}else{//这里是当手指滑动距离小于100时，隐藏‘下拉刷新’效果。也就是说，什么都不做dom2[0].childNodes[1].style.display='none';}});}(5)最后，将Slide构造函数暴露给全局窗口：window.Slide=Slide;整个下载刷新功能就结束了。这很简单。下面是完整的包代码。;(function(){functionSlide(dom){this.start_y=null;this.end_y=null;this.render(dom);}Slide.prototype={//动态创建下拉刷新效果render:function(dom){varbody=document.getElementsByTagName('body');varnewItem=document.createElement('div');newItem.className='slide-wrap';newItem.innerHTML='令人耳目一新...