uniapp scroll-view滑动到最底部
时间: 2023-08-04 22:03:42 浏览: 245
要使一个 `scroll-view` 组件在初始加载时滑动到最底部,可以通过以下步骤实现:
1. 首先,在 `scroll-view` 上添加一个 `ref`,以便在代码中引用该组件。例如:
```html
<scroll-view ref="scrollView" scroll-y="true" style="height: 300px;">
<!-- 内容 -->
</scroll-view>
```
2. 在页面的 `mounted` 生命周期钩子函数中,获取 `scroll-view` 的高度和内容高度,并将滚动位置设置为最底部。可以使用 `uni.createSelectorQuery()` 来获取元素的高度。例如:
```javascript
mounted() {
uni.nextTick(() => {
const scrollView = uni.createSelectorQuery().select('#scrollView');
const content = uni.createSelectorQuery().select('#content');
scrollView.boundingClientRect().exec(([scrollViewRect]) => {
content.boundingClientRect().exec(([contentRect]) => {
const scrollTop = contentRect.height - scrollViewRect.height;
this.$refs.scrollView.scrollTo(0, scrollTop);
});
});
});
}
```
在上述代码中,`#scrollView` 是 `scroll-view` 组件的 id,`#content` 是 `scroll-view` 内容的 id。请确保在正确的位置添加这些 id。
这样,当页面加载时,`scroll-view` 组件将会自动滑动到最底部。
阅读全文
相关推荐















