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