当前位置:   article > 正文

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

scrollview滑动到底部
  1. <template>
  2. <view>
  3. <scroll-view
  4. class="dialogue-box"
  5. style="height: calc(100vh - var(--window-top) - 114rpx - var(--window-bottom));"
  6. @scrolltolower='scrollreach()'
  7. scroll-y="true"
  8. :scroll-top="scrollTop"
  9. :scroll-with-animation="true">
  10. <view class="dialogue-box-content">
  11. </view>
  12. </scroll-view>
  13. </view>
  14. </template>

 

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. scrollTop: 0, //scrollTop 值的变量名
  6. }
  7. },
  8. onLoad(e) {
  9. this.chatScrollTop()
  10. },
  11. methods:{
  12. // 在 scroll-view 内容改变时调用 chatScrollTop 方法
  13. chatScrollTop() {
  14. this.$nextTick(() => {
  15. uni.createSelectorQuery().in(this).select('.dialogue-box-content').boundingClientRect((res) => {
  16. console.log(res, 'res')
  17. // let top = res.height - this.scrollViewHeight;
  18. let top = res.height - 85;//这个85 滚动区域占据页面85vh
  19. if (top > 0) {
  20. this.scrollTop = top;
  21. }
  22. }).exec()
  23. })
  24. //这种写法会出现无法到最底部的情况
  25. // this.$nextTick(() => {
  26. // const query = uni.createSelectorQuery()
  27. // query.select('.dialogue-box').boundingClientRect()
  28. // query.select('.dialogue-box-content').boundingClientRect()
  29. // query.exec(res => {
  30. // const scrollViewHeight = res[0].height
  31. // const scrollContentHeight = res[1].height
  32. // if (scrollContentHeight > scrollViewHeight) {
  33. // const scrollTop = scrollContentHeight - scrollViewHeight
  34. // this.scrollTop = scrollTop
  35. // }
  36. // })
  37. // })
  38. },
  39. }
  40. </script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/312600
推荐阅读
相关标签
  

闽ICP备14008679号