react-iscroll和iScroll怎么实现下拉刷新
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react-iscroll和iScroll怎么实现下拉刷新相关的知识，希望对你有一定的参考价值。
参考技术A 1、引用iScroll.js，在初始化时添加两个事件监听：touchMove、DOMContentLoaded。2、实现iScroll插件的onScrollEnd事件，也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。3、上拉加载请求后台时就相当于分页请求数据，这用Iscroll实现下拉刷新的简单方法
用Iscroll实现下拉刷新的简单方法：
基本步骤分三步：
1、开始滚动=== scrollStart
2，滚动过程中 === scroll
3、停止滚动=== scrollEnd
注意：在内容滚动时触发，只有在iscroll-probe.js 版本中有用。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>移动端的触摸滚动</title> 6 <style> 7 *{ 8 box-sizing: border-box; 9 margin: 0; 10 padding: 0; 11 } 12 #header{ 13 position: absolute; 14 width: 100%; 15 height: 50px; 16 line-height: 40px; 17 text-align: center; 18 background: cyan; 19 20 } 21 #wrapper{ 22 position: absolute; 23 z-index: 1; 24 top: 50px; 25 width: 100%; 26 height: 600px; 27 overflow: hidden; 28 } 29 ul>li{ 30 list-style: none; 31 width: 100%; 32 line-height: 50px; 33 height: 50px; 34 text-align: center; 35 border: 1px dashed chartreuse; 36 } 37 #footer{ 38 position: absolute; 39 z-index: 3; 40 bottom: 0; 41 left: 0; 42 height: 60px; 43 width: 100%; 44 background: #c3c3c3; 45 } 46 #shows{ 47 color: white; 48 background: rgba(0, 228, 182, 0.5); 49 display: none; 50 } 51 </style> 52 </head> 53 <body> 54 <header> 55 <div id="header"> 56 <h1>首页</h1> 57 </div> 58 </header> 59 <div id="wrapper"> 60 <ul> 61 <li id="shows">下拉刷新</li> 62 <li>内容1</li> 63 <li>内容2</li> 64 <li>内容3</li> 65 <li>内容4</li> 66 <li>内容5</li> 67 <li>内容6</li> 68 <li>内容7</li> 69 <li>内容8</li> 70 <li>内容9</li> 71 <li>内容10</li> 72 <li>内容11</li> 73 <li>内容12</li> 74 <li>内容13</li> 75 <li>内容14</li> 76 <li>内容15</li> 77 <li>内容7</li> 78 <li>内容8</li> 79 <li>内容9</li> 80 <li>内容10</li> 81 <li>内容11</li> 82 </ul> 83 </div> 84 <footer> 85 <div id="footer"></div> 86 </footer> 87 <script src="../../js/jquery-3.1.1.min.js"></script> 88 <script src="../../js/iscroll-probe.js"></script> 89 <script> 90 var myScroll=new IScroll("#wrapper",{ 91 scrollbars:true,//有滚动条 92 mouseWheel:false,//允许滑轮滚动 93 interactiveScrollbars:true,//滚动条可以拖动 94 scrollY:true,//纵向滚动条可以使用 95 freeScroll:true,//既有上下又有左右（自由滚动） 96 probeType:1,//对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。 97 }); 98 //开始滚动时触发的事件 99 myScroll.on("scrollStart",function(){ 100 $("#shows").show(); 101 }); 102 // 滚动过程中触发事件 103 myScroll.on("scroll",function(){ 104 if(this.y>40){ 105 $("#shows").text("刷新中"); 106 } 107 }); 108 //停止滚动触发的事件 109 myScroll.on("scrollEnd",function(){ 110 $("#shows").hide().text("下拉刷新"); 111 }) 112 </script> 113 </body> 114 </html>
以上是关于react-iscroll和iScroll怎么实现下拉刷新的主要内容，如果未能解决你的问题，请参考以下文章