0

In my Nativescript-Vue application, I have a ListView within a ScrollView, defined as such:

  <Page>
    <ActionBar :title="friend.name">
        <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" @tap="$navigateBack"/>
    </ActionBar>
    <ActivityIndicator busy="true" v-if="isLoading" />
    <StackLayout v-else orientation="vertical" >
        <ScrollView ref="scrollLayout" class="scrollLayout" height="90%" orientation="vertical">
            <ListView minHeight="90%" ref="listLayout" class="listLayout" for="item in conversations">
                <v-template>
                    <GridLayout columns="*" rows="auto" class="msg">
                        <StackLayout :class="currentUser.id == item.user_id? 'me' : 'them'" orientation="horizontal" :horizontalAlignment="currentUser.id == item.user_id? 'right' : 'left'">
                            <Label :text="item.chat" class="msg_text" textWrap="true" verticalAlignment="top" />
                        </StackLayout>
                </GridLayout>
                </v-template>
            </ListView>
        </ScrollView>
        <StackLayout height="10%" class="chat-box">
            <GridLayout columns="*,auto" style="padding: 5" verticalAlignment="center">
                <TextField hint="Enter message..." class="chatTextField" row="0" col="0" v-model="message"></TextField>
                <Button row="0" col="1" text="send" @tap="scollToBottom"></Button>
            </GridLayout>
        </StackLayout>
    </StackLayout>
</Page>

I already looked into this question by adding minHeight but it does not work on my case. This is the method code to scroll to bottom but the scrollableHeight is always 0

scollToBottom() {
        this.scrollLayout.nativeView.scrollToVerticalOffset(this.scrollLayout.nativeView.scrollableHeight, false);

        console.log(this.$refs.scrollLayout.nativeView.scrollableHeight)
    },
Paul Adrian Marquita
  • 1
  • ListView itself has scrollbars, hence you don't have to wrap it with ScrollView. Use scrollToIndex method. – Manoj Mar 27 '20 at 05:40

2 Answers2

0

Hello I found a solution for this. I use ListView to scroll to the latest chat by using this code: Based on this [link]: https://docs.nativescript.org/vuejs/ns-ui/ListView/scrolling

scollToBottom () {
        // in order to avoid race conditions (only on iOS),
        // in which the UI may not be completely updated here
        // we use this.$nextTick call
        this.$nextTick(() => {
            const indexToScroll = this.conversations.length - 1;
            console.log('Programmatic scrolling to ' + this.conversations[indexToScroll].chat + '... ');
            this.$refs.listLayout.nativeView.scrollToIndex(indexToScroll, false);
        });
    },
Paul Adrian Marquita
  • 1
0

That's what I've implemented in my app which is not ideal but it works. I had to add a setTimeout for it to scroll. The messages are again wrapped in a Scroll View:

   scrollToBottom() {
        setTimeout(() => {
            let scroll = this.$refs.scrollLayout.nativeView.scrollableHeight //get the height of the scroll area
            console.log("Height changed " + scroll)
            this.$refs.scrollLayout.nativeView.scrollToVerticalOffset(scroll, false) //scroll to the last message                        
        }, 1000)
    }
Pipera
  • 86
  • 1
  • 3