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

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

//滚动部分代码

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