微信小程序页面直接滑动到最底端
时间: 2023-10-05 21:07:17 浏览: 172
在小程序中,可以使用scroll-view组件来实现页面滚动。要实现页面直接滑动到最底端,可以在scroll-view组件中设置一个id属性,并在页面加载完成后使用wx.createSelectorQuery()获取该组件的节点信息,然后使用节点信息中的scrollHeight属性设置scroll-view的滚动位置。
具体实现步骤如下:
1. 在scroll-view组件中设置id属性,例如:
```
<scroll-view id="my-scroll-view" style="height: 100vh;">
<!-- 页面内容 -->
</scroll-view>
```
2. 在页面的onLoad函数中,使用wx.createSelectorQuery()获取scroll-view组件的节点信息:
```
onLoad: function () {
let that = this;
wx.createSelectorQuery().select('#my-scroll-view').boundingClientRect(function(rect){
that.setData({
scrollViewHeight: rect.height // 将scroll-view的高度存储到页面数据中
});
}).exec();
}
```
3. 在页面的onReady函数中,使用wx.pageScrollTo()将scroll-view滚动到底部:
```
onReady: function () {
let that = this;
wx.createSelectorQuery().select('#my-scroll-view').boundingClientRect(function(rect){
that.setData({
scrollViewHeight: rect.height // 将scroll-view的高度存储到页面数据中
});
wx.pageScrollTo({
scrollTop: rect.height // 将页面滚动到最底部
});
}).exec();
}
```
通过以上步骤,就可以实现页面直接滑动到最底部的效果。需要注意的是,在获取scroll-view节点信息时,需要使用wx.createSelectorQuery().select()方法,而不是wx.createSelectorQuery().selectAll()方法。因为后者会获取到多个节点信息,无法正确地获取scroll-view的高度。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)