拉动以刷新水平iScroll

Question

最近我成功地将垂直iScroll集成到了我的移动网络中。它具有"拉动刷新"功能。然而，我目前正在将需要实现相同功能的部分堆叠到水平iScroll中。有人知道在哪里可以看到使用相同功能的样本吗？我真的需要帮助。我所需要的只是知道如何做，因为到目前为止，我还不知道。

谨致问候，Askhole：）

Answer 1

iScroll默认情况下不支持从水平角度进行Pull to Refresh。我相信这可以通过一些CSS和代码调整来完成，但你最好在iScroll论坛上问：https://groups.google.com/forum/#！论坛/iscroll

Answer 2

我猜您通过使用非官方的iscroll.js（即为刷新而修改的iscroll）来实现垂直刷新。如果这是你的情况，这个答案可能会有所帮助：

我用官方的iscroll.js实现了垂直刷新，添加了一个小技巧：1.把非常非常小的东西放在下一个底部，用它的位置（）.顶部来检测页面的实际高度

2. 让你在底部"加载"，将其设置为不可见

3. Math.abs（myScroll.y）+wrapper.height==$（yourTiny）.position（）.top

4. 滚动开始时，如果向上滚动，请检查3中的条件。

5. 对于4中的公差，您可以使用，例如：if（Math.abs（myScroll.y-wrapper.height+$（yourTiny）.position（）.top）<11） ｛//要刷新的代码｝

以下是示例代码：

1.html

      <sapn id="theTinyThing">&nbsp;</span>
      <table id="bottomRefreshImg" style="display:none">
        <tr><td><img src="refreshGreen.gif" /></td></tr>
        <tr><td>loading...</td></tr>
      </table>
    </div> //close scroller
  </div>  //close wrapper
  <div id="footer"></div>
  <script src="./jquery-2.2.3.min.js"></script>
  <script src="./iscroll.js"></script>
  <script src="./mrPage.js"></script>
</body>

2.css

#theTinyThing{
  height:1px; //it's ivisible
  font-size:1px;
}

3.js

var myScroll;
var myScroolHasCausedAddNew=0;
function loaded () {
    myScroll = new IScroll('#wrapper', {
                   scrollbars: true,
                   scrollbars: 'custom',
                   mouseWheel: true,
                   click:true,
                   interactiveScrollbars: true,
                   shrinkScrollbars: 'scale',
                   fadeScrollbars: true,
                   snap:true,
                   snap:'table',
    });
    myScroll.on('scrollStart',function(){
        if($("#theTinyThing").position().top + myScroll.y-myScroll.wrapperHeight<11){
            if(myScroll.directionY==1){
                $("#bottomRefreshImg").show();
                myScroolHasCausedAddNew=1;
            }
        }       
        return false;
    });
    myScroll.on('scrollEnd',function(){
        if(myScroolHasCausedAddNew==1){
            myScroolHasCausedAddNew=0;
            $("#bottomRefreshImg").hide();
            loadMore();
        }
        return false;
    });
}