vue3 ts 手机端 点击按钮 滚动到底部
时间: 2023-08-13 16:23:19 浏览: 211
你可以使用Vue.js提供的`ref`和`$refs`来获取到页面中要滚动的元素,然后通过`scrollTo()`方法将滚动条滚动到底部。
下面是一个示例代码:
```vue
<template>
<div ref="scrollContainer" style="height: 100%; overflow: auto;">
<!-- 这里是要滚动的内容 -->
<!-- ... -->
<button @click="scrollToBottom">滚动到底部</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
methods: {
scrollToBottom() {
const container = this.$refs.scrollContainer as HTMLElement;
container.scrollTo({
top: container.scrollHeight,
behavior: 'smooth',
});
},
},
});
</script>
```
在上面的代码中,我们使用`ref`来获取到`div`元素,然后在方法中将滚动条滚动到底部。注意,我们需要将`ref`的类型断言为`HTMLElement`,这样才可以调用`scrollTo()`方法。
希望这个示例可以帮助到你!
阅读全文