Question

最近，我成功地将垂直iScroll整合到我的移动网络中。它具有拉动刷新功能。但是，我目前正在将我需要在水平iScroll 中实现相同功能的部分堆叠起来。有谁知道我在哪里可以看到任何使用相同功能的样本？我真的需要帮助。我所需要的只是知道如何去做，因为到目前为止，我根本不知道。

此致 Askhole：）

Answer 1

默认情况下，iScroll不支持从水平角度提取“刷新”。我确信可以通过一些CSS和代码调整来完成，但你可能最好在iScroll论坛中提问：https://groups.google.com/forum/#!forum/iscroll

Answer 2

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

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

让你＆＃34; onloading＆＃34;在底部，将其设置为隐形
Math.abs（myScroll.y）+ wrapper.height === $（yourTiny）.position（）。top
如果向上滚动，请检查3中的条件。
对于4中的容差，您可以使用，例如：if（Math.abs（myScroll.y - wrapper.height + $（yourTiny）.position（）。top）＆lt; 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;
    });
}

拉动以刷新水平iScroll

2 个答案: