小程序滚动到底部

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

实现代码:

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

评论

  1. Windows Chrome 63.0.3239.132
    5 年前
    2019-8-14 22:32:28

    没有用啊 可以指导我吗

    • 博主
      Linux Chrome 63.0.3239.132
      5 年前
      2019-8-15 9:14:37

      在页面中添加一个view class="answer"
      然后js中添加方法:

      
       bottom: function () {
          wx.createSelectorQuery().select('.answer').boundingClientRect(function (rect) {
            // 使页面滚动到底部
            wx.pageScrollTo({
              scrollTop: rect.height
            })
          }).exec()
        },
      

      然后在需要调用的地方执行这个方法

      
      this.bottom();
      

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇