小程序滚动到底部

黄良钵

分类: 程序开发 161 2

小程序在实时聊天界面每发送一条自动滚动到网页底部;

实现代码:

  1. // 获取im的id节点然后屏幕焦点调转到这个节点
  2.   bottom: function () {
  3.     var query = wx.createSelectorQuery()
  4.     query.select('.im').boundingClientRect()
  5.     query.selectViewport().scrollOffset()
  6.     query.exec(function (res) {
  7.       wx.pageScrollTo({
  8.         scrollTop: res[0].bottom  // #the-id节点的下边界坐标
  9.       })
  10.       res[1].scrollTop // 显示区域的竖直滚动位置
  11.     })
  12.   },

上面的代码有点bug,找了个新的:

  1. // 获取answer节点然后屏幕焦点调转到这个节点
  2.   bottom: function () {
  3.     wx.createSelectorQuery().select('.answer').boundingClientRect(function (rect) {
  4.       // 使页面滚动到底部
  5.       wx.pageScrollTo({
  6.         scrollTop: rect.height
  7.       })
  8.     }).exec()
  9.   },

然后在需要执行滚动的地方加上:

  1. this.bottom();
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
小程序、底部、滚动

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 2 条评论关于 “小程序滚动到底部”

Loading...