Question

当我达到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;
    }

});

但它只是不起作用。我试图在我的垂直滚动视图中支持无限滚动。有什么想法会出错吗？

Answer 1

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

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

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

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

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;

Answer 2

在滚动视图中集成无限滚动时，您需要考虑一些重要事项：

<强> 1。滚动事件被大量触发：尝试使用underscoreJS来限制你的滚动事件回调。

Throttle创建并返回传递函数的新的受限制版本，当重复调用时，每次等待毫秒最多只调用一次原始函数。对于速度限制事件非常有用，这些事件发生得比您能跟上的速度要快。有关更多信息，请参阅underscorejs文档。

<强> 2。 Android vs 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

Titanium Infinite Scroll：不工作

2 个答案: