赞
踩
- <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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。