小程序如何自动滚动到页面底部？

叁歲伎倆 2022-05-15 17:49 370阅读 0赞

经过实际验证，我使用 wx.pageScrollTo() 在 onReady() 中滚动页面，这个效果只在 tab 页面上可用，在子页面使用会让用户迷惑。

onReady() {
        const height = this.data.projectNum * 90 + 92    // 计算出页面高度
        wx.pageScrollTo({            
          scrollTop: height,         
          duration: 300              
        })                           
      },

下面是网上找的代码，实测效果不好：

// 获取容器高度，使页面滚动到容器底部
      pageScrollToBottom: function() {
        wx.createSelectorQuery().select('#j_page').boundingClientRect(function(rect){
          // 使页面滚动到底部
          wx.pageScrollTo({
            scrollTop: rect.bottom + 5000
          })
        }).exec()
      },

*  j\_page为页面容器的id
 *  使用 rect.bottom, rect.height 均能达到滚动到底部的效果
 *  在数据更新后（setData回调函数）使用

按理说，滚动到 rect.bottom，就可以了。但实际中发现滚不到底，索性加上 5000。

[https://segmentfault.com/q/1010000012493589/a-1020000012494791][https_segmentfault.com_q_1010000012493589_a-1020000012494791]

[https_segmentfault.com_q_1010000012493589_a-1020000012494791]: https://segmentfault.com/q/1010000012493589/a-1020000012494791

发表评论取消回复

表情：

评论列表（有 0 条评论，370人围观）

还没有评论，来说两句吧...

相关阅读

相关 js监听scrolltop_JS监听页面滚动到底部事件

Eclipse安装Spring-tool-suite 目录结构: // contents structure \[-\] 在Eclipse上安装Spring-tool-sui

分手后的思念是犯贱/ 2023年01月09日 01:12/ 0 赞/ 169 阅读

相关页面滚动条固定到最底部

页面滚动条固定到最底部项目中遇到的需求,具体可以用来实现聊天室发送消息后使最后发的消息展示在页面上等, 方法亲测有效 1. 在想要定位的位置添加一个空的`div`

Dear 丶/ 2022年12月08日 01:59/ 0 赞/ 159 阅读

相关 js 写一个方法判断页面滚动条到页面底部的距离

在开发项目的时候，有的页面数据很多，一次加载完成需要消耗大量的时间，都做了分页加载。这里写一段代码，来实现分页加载的时候是如何判断滚动条到页面底部，然后继续请求加载数据的

野性酷女/ 2022年11月28日 10:37/ 0 赞/ 242 阅读

相关 vue js页面滚动到最底部

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ODM4

向右看齐/ 2022年10月22日 04:30/ 0 赞/ 227 阅读

相关 listview滚动到底部自动加载数据

文章转自：[http://blog.csdn.net/coderinchina/article/details/40188295][http_blog.csdn.net_cod

ゝ一纸荒年。/ 2022年06月02日 11:59/ 0 赞/ 295 阅读

相关 jquery如何判断滚动条滚到页面底部并执行事件

转载自：[http://www.diycms.com/edu/jquery/117.html][http_www.diycms.com_edu_jquery_117.html]

冷不防/ 2022年05月23日 06:34/ 0 赞/ 231 阅读

相关小程序如何自动滚动到页面底部？

经过实际验证，我使用 wx.pageScrollTo() 在 onReady() 中滚动页面，这个效果只在 tab 页面上可用，在子页面使用会让用户迷惑。 onRea

叁歲伎倆/ 2022年05月15日 17:49/ 0 赞/ 371 阅读

相关 ionic 页面滚动到底部方法

强列推荐先看这篇译文《[angular4 滚动事件][angular4]》 You’re trying to call a component method befo

骑猪看日落/ 2022年04月08日 18:13/ 0 赞/ 404 阅读

相关小程序获取页面滚动的高度

wx.createSelectorQuery().select('the-id').boundingClientRect(function(rect){

待我称王封你为后i/ 2022年01月25日 23:55/ 0 赞/ 1137 阅读

相关小程序scroll-view滚动到底部页面闪烁消失的问题

概述我的情况是页面分两部分，左边scroll-view商品分类，右侧scroll-view展示该分类下的商品。某些情况下，右侧scroll-view滚动到底部时

柔情只为你懂/ 2021年10月18日 12:17/ 0 赞/ 629 阅读