Scroll animation for ListView

animation
ios

#1

Hi,

I learned it is possible to show animation on iOS based on this article.

However, I got an undefined error for below code.

var listview = (frameModule.topmost().currentPage.getViewById(“listview”));
listview.ios.scrollToRowAtIndexPathAtScrollPositionAnimated(
NSIndexPath.indexPathForItemInSection(2, 0),
UITableViewScrollPosition.UITableViewScrollPositionTop,
true
);

any help? Thanks.
nativescript-pro-ui:3.3.0
tns-ios:“3.2.0”


#2

On which line? And please add the complete error and/or stacktace. We also need to see the related view code, so you may want to share this on Playground or Github.


#3

Hi

I got below error message when clicked btn1

file:///app/main-page.js:36:68: JS ERROR TypeError: listview.ios.scrollToRowAtIndexPathAtScrollPositionAnimated is not a function. (In ‘listview.ios.scrollToRowAtIndexPathAtScrollPositionAnimated’, ‘listview.ios.scrollToRowAtIndexPathAtScrollPositionAnimated’ is undefined)

Please refer below code:

js

var view = require("ui/core/view");
var frameModule = require("tns-core-modules/ui/frame");

exports.btn1_test_on_click = function(args){
    var page = frameModule.topmost().currentPage
    var listview = page.getViewById("listview");
    if (page.ios){

        listview.ios.scrollToRowAtIndexPathAtScrollPositionAnimated(
        NSIndexPath.indexPathForItemInSection(1, 0),
        UITableViewScrollPosition.UITableViewScrollPositionTop,
        true
    );

    }else if(page.android){

        listview.android.smoothScrollToPosition(1);
    }
    else{
        listview.scrollToIndex(1);
    }
    // console.log(listview.ios)

}

exports.pageLoaded = function(args) {

    var items = [];
    items.push(
        {
            w1: "Arcade Fire",
            t1: "Funeral",

            w2: "Bon Iver",
            t2: "For Emma, Forever Ago",

            w3: "Daft Punk",
            t3: "Random Access Memories",

            w4: "Elbow",
            t4: "Build a Rocket Boys!"


        }
    )



    items.push(
        {
            w1: "1_Arcade Fire",
            t1: "1_Funeral",

            w2: "1_Bon Iver",
            t2: "1_For Emma, Forever Ago",

            w3: "1_Daft Punk",
            t3: "1_Random Access Memories",

            w4: "1_Elbow",
            t4: "1_Build a Rocket Boys!"
        }
    )


    items.push(
        {
            w1: "2_Arcade Fire",
            t1: "2_Funeral",

            w2: "2_Bon Iver",
            t2: "2_For Emma, Forever Ago",

            w3: "2_Daft Punk",
            t3: "2_Random Access Memories",

            w4: "2_Elbow",
            t4: "2_Build a Rocket Boys!"
        }
    )


    var page = args.object;
    var listview = view.getViewById(page, "listview");
    listview.items = items;


}

xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:lv="nativescript-pro-ui/listview" loaded="pageLoaded">

        <DockLayout stretchLastChild="true">
                <StackLayout dock="top" height = "12%" orientation="vertical" horizontalAlignment="center">
               <Label  text=" Hello " horizontalAlignment="center" />

                </StackLayout>

                <StackLayout dock="bottom" height = "15%" orientation="horizontal" horizontalAlignment="center">

                    <Button text="btn1" tap="btn1_test_on_click"  />

                </StackLayout>

        
               <lv:RadListView id="listview" class="list-group" width="100%"> 

                <lv:RadListView.listViewLayout>
                    <lv:ListViewLinearLayout scrollDirection="Horizontal" width="100%"/>
                </lv:RadListView.listViewLayout>
                <lv:RadListView.itemTemplate >
                    <StackLayout orientation="Vertical" width="92%">
                        <StackLayout class="list-group-item" width="100%" orientation="horizontal" backgroundColor="lightblue">
                            <Label text="{{ w1 }}" class="list-group-item-heading" />
                            <Label text="{{ t1 }}" textWrap="true" class="list-group-item-text" />
                        </StackLayout>
                       <StackLayout class="list-group-item" width="100%" orientation="horizontal" >
                            <Label text="{{ w2 }}" class="list-group-item-heading" />
                            <Label text="{{ t2 }}" textWrap="true" class="list-group-item-text" />
                        </StackLayout>
                       <StackLayout class="list-group-item" width="100%" orientation="horizontal" backgroundColor="lightblue">
                            <Label text="{{ w3 }}" class="list-group-item-heading" />
                            <Label text="{{ t3 }}" textWrap="true" class="list-group-item-text" />
                        </StackLayout>
                       <StackLayout class="list-group-item" width="100%" orientation="horizontal">
                            <Label text="{{ w4 }}" class="list-group-item-heading" />
                            <Label text="{{ t4 }}" textWrap="true" class="list-group-item-text" />
                        </StackLayout>
                    </StackLayout>
                </lv:RadListView.itemTemplate>
                </lv:RadListView> 

        </DockLayout>
</Page>

Trying to get BOTH horizontal and vertical scrolling in a view. Anyone succeeded?
#4

Any reason why the scrollToIndex method wouldn’t work for you? https://github.com/NativeScript/NativeScript/blob/2eba7c66e4ba82d4077f53b3f4257db64db481d2/tns-core-modules/ui/list-view/list-view.ios.ts#L283


#5

@pohor I see that you are using RadListView (Pro UI) which already supports animation. You have to refer the documentation here.

Your code works just fine in Playground. You can control the animation with the second parameter.

// don't send second param / set it to false to prevent animation
listview.scrollToIndex(2, true); 

#6

You Can also Use Css

ListView {
	animation-name: example;
	animation-duration: 1s;
	animation-timing-function: ease;
}


@keyframes example {
	0% {
        opacity: 0;
        transform: translate(0,250);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

For Mor Documentation Use w3 css
or use Transformations