最后，创建一个简单形式的下拉刷新页面，这并不太复杂

只能在模拟器下看到效果，比如chrome(或者用手机浏览器查看，但是测试发现部分浏览器有问题，目前手机猎豹没问题)

主要是：

下拉-提示释放刷新-释放后-开始刷新-刷新成功后恢复

Html，css部分

style type=' text/CSS ' # slide down { margin-top : 0；宽度： 100%；} #slideDown1，# slide down 2 { width : 100%；高度： 70px；背景# e9f4f7display:无；} # slideDown1 { height: 20px} #slideDown1p，# slide down 2p { margin : 20px auto；文本对齐：居中；font-size : 14px；color: # 37bbf5}/style div id=' content ' div id=' slide down ' div id=' slide down 1 ' plonk并刷新/p/div div id=' slide down 2 ' pRefreshing./p/div/div class=' my content ' ul liitem 1-item 1-item 1/Li liitem 2-item 2-item 2/Li liitem 3-item 3-item 3/Li liitem 4-item 4/Li iitem5-item 5-item 5/Li iitem6-item 6/Li iitem7-item 7/Li/ul/div/div js部分：

主要是为一个节点绑定一个事件，可以是全身。根据实际情况，

函数k_touch()是主要代码，目前主要涉及三个事件，touchstart touchmove touchend

Pagex用于获取此处触摸点的坐标。如果pagey当然不兼容，它将不会被首先考虑

因为是下降后刷新的，控制方式有点，其实就是通过这个控制来获取pageX或者pageY

滑动可以直接看到距离的变化。事实上，把它想象成px

更多功能，以后再说.

脚本类型='text/javascript' //第一步：下拉过程函数slideDownStep1(dist){ //dist下滑的距离，用以拉长背景模拟拉伸效果var向下滑动1=文档。getelementbyid('向下滑动1 ')，向下滑动2=document。getelementbyid('向下滑动2 ')；向下滑动2。风格。显示='无'；向下滑动1。风格。display=' block向下滑动1。风格。height=(ParSeint(' 20px ')-dist)' px '；} //第二步：下拉，然后松开，函数向下滑动步骤2(){ var向下滑动1=文档。getelementbyid('向下滑动1 ')，向下滑动2=document。getelementbyid('向下滑动2 ')；向下滑动1。风格。显示='无'；向下滑动1。风格。高度=' 20px向下滑动2。风格。display=' block//刷新数据//位置。重载()；} //第三步：刷新完成，回归之前状态函数向下滑动步骤3(){ var向下滑动1=文档。getelementbyid('向下滑动1 ')，向下滑动2=document。getelementbyid('向下滑动2 ')；向下滑动1。风格。显示='无'；向下滑动2。风格。显示='无'；} //下滑刷新调用k_touch('content '，' y ')；//contentId表示对其进行事件绑定，方式==x表示水平方向的操作，y表示竖直方向的操作函数k_touch(contentId，way){ var _start=0，_end=0，_ content=document。getelementbyid(内容id)；_内容。addeventlistener(' touchstart '，touchstart，false)；_内容。addeventlistener(' touchmove '，touchmove，false)；_内容。addeventlistener(' touchend '，touchend，false)；函数TouchStart(事件){//var Touch=事件。touch[0]；//这种获取也可以，但已不推荐使用var touch=事件。目标触摸[0]；if(way==' x '){ _ start=touch。pagex} else { _ start=touch.pageY} }函数触摸移动(事件){ var touch=event。目标触摸[0]；if(way==' x '){ _ end=(_ start-touch。pagex)；} else { _ end=(_ start-touch。pagey)；//下滑才执行操作if(_ end 0){向下滑动第1步(_ end)；} } }函数touchEnd(事件){ if(_end 0){ console.log('左滑或上滑_ end)；}else{ console.log('右滑或下滑_ end)；向下滑动步骤2()；//刷新成功则//模拟刷新成功进入第三步setTimeout(函数(){ slide down step 3()；},2500);} } }/脚本以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。