微信小程序，自动滑动到页面底部功能

最新推荐文章于 2025-07-08 11:27:21 发布

转载

最新推荐文章于 2025-07-08 11:27:21 发布 · 9.3k 阅读

10 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2480675/blog/3040220

文章标签：

#python

在开发微信小程序即时聊天功能时，遇到了自动滚动到页面底部的需求。本文介绍了两种解决方案：一是通过js方法，但在页面上滑时可能出现抖动且可能影响input光标位置；二是利用scroll-view组件，通过设置高度实现平滑滚动，实测可行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

最近在做即时聊天时，碰到了自动滑动到底部的问题，2个解决方式（其中方法1有瑕疵）：

方法一：

// 获取容器高度，使页面滚动到容器底部
  pageScrollToBottom: function() {
    wx.createSelectorQuery().select('#page').boundingClientRect(function(rect) {
      if (rect){
        // 使页面滚动到底部
        console.log(rect.height);
        wx.pageScrollTo({
           scrollTop: rect.height
        })
      }
    }).exec()
  },

将js方法在页面加载完成以及发送完消息后执行，即可自动滚动到页面底部，在需要滚动的view上使id="page"；不过问题有二：

1、页面在自动上滑时会出现抖动现象，给人感觉很不舒服；

2、及时聊天在页面下方会有一个input输入框，如果该input使用confirm-hold="true"（点击右下角保持键盘不收起），那么在用该方法上滑时会将input的光标带到上面去，导致光标位置偏移。

方法二：使用scroll-view组件<