TVML / tvOS Detect end of scroll

Question

I have collection list and shelf. I can download only 10 items. When user scrolled to end, I should make new request. But i dont how detect end of scroll in xml or in js

Answer 1

I have discovered sample codes from Apple and found one intersting event. It calls "needsmore".

//A DocumentController subclass that handles pagination for multiple shelfs
class ShelfDocumentController extends DocumentController {

setupDocument(document) {
    super.setupDocument(document)

    let shelfs = document.getElementsByTagName("shelf")
    if (!shelfs || shelfs.lenth == 0) { return }

    //enumerate all shelfs in the template
    for (let idx = 0; idx < shelfs.length; ++idx) {
        let shelf = shelfs.item(idx)
        shelf.page = 1

        //using the data url from the shelf's first section (there should only be one section per shelf)
        let sections = shelf.getElementsByTagName("section")
        if (!sections || sections.length == 0) { continue }

        let section = sections.item(0)
        let pageUrl = section.getAttribute("dataURL")

        //add the listener to the shelf
        shelf.addEventListener("needsmore", (event) => {
            //replace this code with your logic for getting new pages
            shelf.page = shelf.page + 1
            if (shelf.page > 10) { return }
            let nextPageUrl = pageUrl.replace("\.json", "_" + shelf.page + ".json")
            this.fetchNextPageAtURL(nextPageUrl, section);
        })
    }
}
}

Answer 2

Same requirement i had but i couldn't find any direct way to achieve this so what i did for my app, can tell you.

Step-1 : while rendering your 10 items on UI using xml, you can add one attribute to the ui element (for me it was lockup) in xml file.

ex : < lockup index="{{index}}">

Step-2 : Add the doc for event listing

doc.addEventListener("highlight",_handleHighlight)

Step-3 : Each time the lockup get focus, control will come to _handleHighlight function. there you can find the index , based on that perform the pagination.

_handleHighlight(event) { 
        var self = this;
        var ele = event.target;
        var index = ele.getAttribute("index")
        // if idndex > (item.count - 3) perform pagination
}