scroll-view 实现自动滚动到最底部

<template>
    <view>
        	<scroll-view 
                    class="dialogue-box" 
                    style="height: calc(100vh - var(--window-top) - 114rpx - var(--window-bottom));"
				    @scrolltolower='scrollreach()' 
                    scroll-y="true" 
                    :scroll-top="scrollTop" 
                    :scroll-with-animation="true">
				        <view class="dialogue-box-content">
                        </view>
            </scroll-view>
    </view>
</template>

 

<script>
    export default {
		data() {
			return {
				scrollTop: 0, //scrollTop 值的变量名
			}
		},
		onLoad(e) {
			this.chatScrollTop()
		},
        methods:{
            // 在 scroll-view 内容改变时调用 chatScrollTop 方法
			chatScrollTop() {

				this.$nextTick(() => {
					uni.createSelectorQuery().in(this).select('.dialogue-box-content').boundingClientRect((res) => {
						console.log(res, 'res')

						// let top = res.height - this.scrollViewHeight;
						let top = res.height - 85;//这个85 滚动区域占据页面85vh
						if (top > 0) {
							this.scrollTop = top;
						}
					}).exec()
				})

                //这种写法会出现无法到最底部的情况
                // 	this.$nextTick(() => {
			// 		const query = uni.createSelectorQuery()
			// 		query.select('.dialogue-box').boundingClientRect()
			// 		query.select('.dialogue-box-content').boundingClientRect()
			// 		query.exec(res => {
			// 			const scrollViewHeight = res[0].height
			// 			const scrollContentHeight = res[1].height
			// 			if (scrollContentHeight > scrollViewHeight) {
			// 				const scrollTop = scrollContentHeight - scrollViewHeight
			// 				this.scrollTop = scrollTop
			// 			}
			// 		})
			// 	})
			},
        }
</script>