iscroll4 - 拉动刷新水平 iScroll

Question

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

问候，Askhole :)

Answer 1

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

Answer 2

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

我用官方的iscroll.js 实现了垂直刷新，添加了一个小技巧： 1. 在next-bottom 保持非常小，使用它的position().top 来检测你页面的实际高度

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;
    });
}