Nativescript-vue Onload event와 Scrollbar event

처음 화면이 로딩되었을때 Default로 실행하도록 하는 경우 onload 이벤트 핸들러를 사용.

<Page @loaded="read">    // <======= @onload 이벤트 핸들러를 이용하여 페이지 시작시 기본 실행
    <ActionBar title="Main List">
        <StackLayout>
            <Image class="logo" src="~/assets/images/logo.png" /><Label :text="scrollText" />
        </StackLayout>
    </ActionBar>

    <ScrollView @scroll="read">  // <====== @scroll 이벤트 핸드러를 이용하여 페지이 스크롤시 실행
        <StackLayout>
            <Post v-for="(item, index) in posts"
                    :key="index"
                    :Image="item.Image"
                    :Favor="item.Favor"
             />
        </StackLayout>
    </ScrollView>
</Page>

이 경우 페이지를 조금만 움직여도 바로 스크롤 이벤트가 발생하므로 이벤트 처리시에 이를 체크하도록 코드 추가

methods: {
    read(args) {
        if( ... &&  args.object.verticalOffset != undefined && args.object.scrollableHeight != undefined) {
            if ( args.object.verticalOffset < args.object.scrollableHeight * 0.99 ) {
                return true;
            }
        }

스크롤 이벤트 발생시 넘어온 args 파라미터는 다음이 속성들을 가지고 체크할 수 있음.

//args.object.getMeasuredHeight() : 화면상 높이
//args.object.effectiveHeight :
//args.object.height : css 상 높이. 보통 auto
//args.object.scrollableHeight : scroll bar 로 나타낼 수 있는 최대 높이