scroll-view 轻松实现滚动到底部

2023-02-08 04:11:13

在 UniApp 中使用 Scroll-View 实现自动滚动到底部

在 UniApp 项目中，scroll-view 组件是实现页面内容滚动的常用组件。在某些场景下，例如聊天记录页面、微博评论页面等，我们需要实现自动滚动到底部。

实现方法

实现自动滚动到底部的方法有很多，这里介绍一种简单易用的方法：

在需要自动滚动的页面中，引入 scroll-view 组件。
为 scroll-view 组件设置 scroll-into-view 的属性，该属性的值为需要自动滚动的元素的 id。
在页面加载完成后，使用 JavaScript 代码触发 scroll-into-view 的属性，即可实现自动滚动到底部。

示例代码：

<template>
  <scroll-view scroll-into-view="{{bottomId}}">
    <view id="top">顶部内容</view>
    <view id="bottom">底部内容</view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      bottomId: 'bottom'
    }
  },
  onLoad() {
    setTimeout(() => {
      this.scrollIntoView()
    }, 100)
  },
  methods: {
    scrollIntoView() {
      this.$refs.scrollview.scrollIntoView('#' + this.bottomId)
    }
  }
}
</script>

在上面的示例代码中，我们需要先在 scroll-view 组件上设置 scroll-into-view 的属性，并将该属性的值设置为需要自动滚动的元素的 id，然后在页面加载完成后，使用 setTimeout 函数延迟 100 毫秒，然后调用 scrollIntoView() 方法，即可实现自动滚动到底部。

注意事项

scroll-into-view 的属性只在页面加载完成后才有效，因此我们需要在页面加载完成后再触发 scrollIntoView() 方法。
scroll-into-view 的属性还可以接受一个对象作为参数，该对象包含 scrollTop 和 scrollLeft 的属性，分别表示需要滚动的纵向距离和横向距离。
scrollIntoView() 方法也可以接受一个对象作为参数，该对象包含 scrollTop 和 scrollLeft 的属性，分别表示需要滚动的纵向距离和横向距离。