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

最近在做即时聊天时，碰到了自动滑动到底部的问题，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组件

wxml——

<scroll-view id="page" style='height: {{windowHeight - 60}}px' scroll-y="true" scroll-top="{{scrollTop}}">
//滚动部分代码
</scroll-view>

ps:页面中的60，是自己输入框的高度

js——

   data: {
     scrollTop: 0,//控制上滑距离
     windowHeight: 0,//页面高度
   }

   /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    var height = wx.getSystemInfoSync().windowHeight;
    this.setData({
      windowHeight: height
    })
    this.pageScrollToBottom();
  },

  // 获取容器高度，使页面滚动到容器底部
  pageScrollToBottom: function() {
    var that = this;
    var height = wx.getSystemInfoSync().windowHeight;
    wx.createSelectorQuery().select('#page').boundingClientRect(function(rect) {
      if (rect){
        that.setData({
          windowHeight: height,
          scrollTop: rect.height
        })
      }
    }).exec()
  },

同样的，将js方法在页面加载完成以及发送完消息后执行，即可自动滚动到页面底部，自测可行；

方法二参考自：https://www.jb51.net/article/150492.htm