Nativescript- Vue Высота прокрутки ScrollView всегда равна 0. Моя цель - прокрутить ее до дна, так как это приложение для чата. - PullRequest
Новая
       21

Nativescript- Vue Высота прокрутки ScrollView всегда равна 0. Моя цель - прокрутить ее до дна, так как это приложение для чата.

0 голосов
/ 27 марта 2020

В моем приложении Nativescript- Vue у меня есть ListView в ScrollView, который определяется следующим образом: 

  <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>

Я уже изучил этот вопрос , добавив minHeight, но он не работает в моем случае. Это код метода для прокрутки вниз, но scrollableHeight всегда 0 

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

        console.log(this.$refs.scrollLayout.nativeView.scrollableHeight)
    },

Ответы [ 2 ]

0 голосов
/ 28 марта 2020

Это то, что я реализовал в своем приложении, что не идеально, но работает. Мне пришлось добавить setTimeout для прокрутки. Сообщения снова помещаются в представление прокрутки: 

   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)
    }
0 голосов
/ 27 марта 2020

Здравствуйте, я нашел решение для этого. Я использую ListView для прокрутки до последнего чата с помощью этого кода: На основе этой [ссылка]: 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);
        });
    },
...