小程序滚动到底部

原创 黄良钵  2018-02-26 11:52  阅读 438 次 评论 0 条

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

实现代码:

  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();

历史上的今天:

关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情