钛无限卷轴：不工作答案

【问题标题】：Titanium Infinite Scroll : Not working钛无限卷轴：不工作
【发布时间】：2012-12-01 01:40:40
【问题描述】：

当滚动视图达到 40% 时，我正在尝试将视图添加到滚动视图中。这就是我的做法：

scrollView.add(//add first 10 initial containerView's);
var triggerScroll = true; 
var scrollPercentage = 0; 
scrollView.addEventListener('scroll', function(e) { 
var devHeight = Ti.Platform.displayCaps.platformHeight; 
    var currPos = scrollView.contentOffset.y;
    if(currPos > devHeight){
        currPos = currPos - devHeight;
    }

    scrollPercentage = (currPos)/devHeight * 100;

    if(scrollPercentage > 40 && triggerScroll){
        triggerScroll = false;
        var containerView = myapp.createMyView();
        scrollView.add(containerView);
    }

    //reset scroll to true after the offset reaches end of the screen, so that the 
    //'scroll' event listener only gets called ONCE every time it crosses 40%
    if(scrollPercentage > 101){
        triggerScroll = true;
    }

});

但它只是不工作。我试图在我的垂直滚动视图中支持无限滚动。知道出了什么问题吗？

【问题讨论】：

myapp.createMyView() 是否返回具有设置属性的视图？还是只是一个空视图对象？
具有设置属性的视图..
从外观上看，这段代码只会添加一个视图。添加一个视图后。 triggerScroll 设置为 false，这将使 if 语句失败
但是当滚动偏移量越过 devHeight 时，scrollPercentage 被设置为大于 100 的数字。这将重置 triggerScroll 布尔值
我找到了问题，只是想找到解决方案:)。 scrollPercentage 不会达到 101，直到您滚动了大约两倍的屏幕长度

标签： titanium titanium-mobile titanium-modules

【解决方案1】：

我在使用无限滚动时使用下面的模块。它使用TableView，但我认为您也可以将其应用于 ScrollView。您需要传入一个function，当TableView 注册应该加载更多内容时将调用该function。

完成加载后，您必须调用 loadingDone 函数以启用 TableView 启动另一个加载序列。

m_bNoDataFound 的值确保在没有更多数据填充列表时不会启动加载序列。

如果希望在滚动期间迟早启动加载序列，您可以更改偏移量（当前为 Android 的 0.75 和 iOS 的 0.90）。

function TableView( onLoad ) {
    var isAndroid = Ti.Platform.osname === 'android' ? true : false;

    var m_bNoDataFound = false;
    var m_nLastDistance = 0;
    var m_bPulling = false;
    var m_bLoading = false;

    var table = Ti.UI.createTableView( {
        height : Ti.UI.FILL
    } );

    table.addEventListener( 'scroll', function( evt ) {
        //Scroll to load more data
        if( !m_bNoDataFound ) {
            if( isAndroid ) {
                if( !m_bLoading && ( evt.firstVisibleItem + evt.visibleItemCount ) >= ( evt.totalItemCount * 0.75 ) ) {
                    onLoad( true );
                    m_bLoading = true;
                }
            }
            else {
                var nTotal = evt.contentOffset.y + evt.size.height;
                var nEnd = evt.contentSize.height;
                var nDistance = nEnd - nTotal;

                if( nDistance < m_nLastDistance ) {
                    var nNearEnd = nEnd * 0.90;

                    if( !m_bLoading && ( nTotal >= nNearEnd ) ) {
                        onLoad( true );
                        m_bLoading = true;
                    }
                }

                m_nLastDistance = nDistance;
            }
        }
    } );

    function m_fLoadingDone( a_bNoDataFound ) {
        m_bNoDataFound = a_bNoDataFound;

        if( m_bLoading )
            setTimeout( function( ) {
                m_bLoading = false;
            }, 250 );
    }

    return {
        table : table,
        loadingDone : m_fLoadingDone
    };
};

module.exports = TableView;

【讨论】：

这不适用于滚动视图。但是使用表格视图效果很好。

【解决方案2】：

在滚动视图中集成无限滚动时，您必须考虑一些重要的事情：

1.滚动事件被触发很多：尝试使用 underscoreJS 限制滚动事件回调。

Throttle 创建并返回传递函数的新的节流版本，当重复调用时，每等待毫秒最多只会实际调用一次原始函数。对于发生得比您跟得上快的限速事件很有用。有关更多信息，请参阅 underscorejs 文档。

2。 Android 与 iOS 上的默认单位和系统单位： Android 上的视图大小使用与视图坐标不同的显示单位。这种单位不匹配会导致无限滚动触发器的错误计算。要解决这个问题，您必须自己获取和设置默认单位。可以在这个小部件中找到解决方案（参见 getDefaultUnit()）：https://github.com/FokkeZB/nl.fokkezb.color/blob/master/controllers/widget.js

3. ti-infini-scroll 可以帮助您： 这个库创建一个围绕默认 Titanium ScrollView 的包装器。此包装器包含滚动结束的计算（更新/获取新数据的触发器）。使用这个库时，不要忘记实现第 2 个项目符号。 https://github.com/goodybag/ti-infini-scroll

【讨论】：