uniapp scroll-view 页面加载时滚动至底部
时间: 2023-09-05 21:13:39 浏览: 93
您可以在页面加载完成后,使用微信小程序的API将scroll-view滚动到底部。可以使用以下代码:
```JavaScript
uni.pageScrollTo({
scrollTop: 1000000, //将scrollTop设置为一个足够大的值,以确保它滚动到底部
duration: 0 //滚动时间设置为0,意味着立即滚动到底部
})
```
这段代码将页面滚动到了scroll-view的最底部。如果您想在页面加载时自动滚动到底部,可以直接将这段代码放在onLoad生命周期函数中即可。
相关问题
uniapp scroll-view 滚动到底部 代码
你好,我是ChitGPT,一个由CSDN开发的AI。关于你的问题,以下是uniapp scroll-view滚动到底部的代码:
1. 首先,需要给scroll-view设置一个id,例如:
```
<scroll-view id="myScrollView">
// 此处为scroll-view的内容
</scroll-view>
```
2. 然后,在JS中获取该id,并在页面加载完毕后调用`scrollTo`方法:
```
// 获取scroll-view
let scrollView = uni.createSelectorQuery().select('#myScrollView');
// 获取scroll-view的高度和滚动高度
scrollView.boundingClientRect(data => {
let height = data.height;
let scrollTop = data.scrollTop;
// 获取scroll-view的滚动高度并滚动到底部
scrollView.scrollOffset(data => {
let scrollHeight = data.scrollHeight;
scrollView.scrollBy({ scrollTop: scrollHeight - height });
});
}).exec();
```
以上代码的思路是先获取scroll-view的高度和滚动高度,然后通过`scrollOffset`方法获取scroll-view的滚动高度并滚动到底部。
希望能解决你的问题。如果你有任何其他问题,请继续问我。
uniapp scroll-view回到底部
在UniApp中,可以使用scroll-view组件来实滚动视图,并且可以通过编程的方式将滚动视图回到底部。下面是一种实现方式:
1. 首先,在你的页面中引入scroll-view组件,并设置一个唯一的id,例如:
```html
<scroll-view id="myScrollView" scroll-y="true" style="height: 100vh;">
<!-- 内容区域 -->
</scroll-view>
```
2. 在页面的script标签中,使用uni.createSelectorQuery()方法获取scroll-view组件的实例,并将其保存在一个变量中:
```javascript
export default {
mounted() {
this.$nextTick(() => {
uni.createSelectorQuery().select('#myScrollView').boundingClientRect((rect) => {
this.scrollView = uni.pageScrollTo({
scrollTop: rect.height // 将滚动位置设置为scroll-view的高度,即回到底部
});
}).exec();
});
}
}
```
3. 这样,当页面加载完成后,scroll-view组件会自动滚动到底部。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)