1

I am trying to add views to my scroll view when it reaches 40% scroll. This is the way I am doing it :

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

});

But its just not working. I am trying to support infinite scroll in my vertical scroll view. Any idea whats going wrong ?

4

2 回答 2

1

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

完成加载后，您必须调用loadingDone-function 才能TableView启动另一个加载序列。

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

如果希望在滚动期间迟早启动加载序列，您可以更改偏移量（当前0.75适用于 Android 和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;
于 2014-01-30T10:08:07.953 回答
1

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

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

于 2016-02-18T08:35:54.923 回答