How to hide horizontal scroll indicator for ios in nativescript angular

3
votes

Hi I am developing application for iOS and Android using NativeScript-Angular. I have created horizontal ListView using RadListView plugin. Everything works fine, but the scroll indicator does not hide in iOS.

In Android the scroll indicator was hidden. How can I fix this issue in iOS?

My Html file:

 <RadListView row="0" selectionBehavior="Press" (itemSelected)="onItemSelected($event)"  #menurad class="m-t-10" row="0" height="50"  [items]="allMenuList">
                <ng-template tkListItemTemplate let-themenu="item" let-i="index">
                        <StackLayout orientation="horizontal" (tap)="menuClick(i)" >
                                <Label class="Selected" [text]="themenu.menuName" ></Label>
                                <Label width="20"></Label>
                        </StackLayout>
                </ng-template>
                <ListViewLinearLayout tkListViewLayout scrollDirection="Horizontal"></ListViewLinearLayout>
        </RadListView>
2
nativescriptnativescript-angularradlistview
Since you have tagged this with RadListView, can you confirm which item layout you are using? A sample code could give even more clarity on what exactly you are looking for. - Manoj
ok i will give you my code. - Arigarasuthan
Any solution? @ Manoj - Arigarasuthan

2 Answers

3
votes

This should work for RadListView

onLoaded(event) {
    const listView = event.object;
    if (listView.ios) {
        listView.ios.collectionView.showsHorizontalScrollIndicator = false;

        // In case of vertical scrollbars uncomment the line below 
        // listView.ios.collectionView.showsVerticalScrollIndicator = false;
    }
}

Playground Sample

3
votes

iOS: myListView.ios.showsVerticalScrollIndicator = false;

android: myListView.android.setVerticalScrollBarEnabled(false);

Above code worked for me, for hiding Vertical scroll. You can try the same for HorizontalScrollIndicator ...