小程序滚动到底部

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

实现代码:

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

黄良钵

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

小程序滚动到底部
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close