微信小程序 scroll-view 实现自动滑动到底部-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序 scroll-view 实现自动滑动到底部。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面

要实现实时聊天功能的话，那么每次有新的消息进来之后，要自动的滚动到底部。

涉及技术点

scroll-view 有一个属性 scroll-into-view：
微信小程序 scroll-view 实现自动滑动到底部

把新进来的消息，push 添加到消息列表 messageList 中。
但页面不会自动往下滚动。

实现代码

1、在 scrill-view 节点最下面加一个垫片节点。

<scroll-view
  class="scroll-wrapper"
  scroll-into-view="{{scrollTo}}"
  scroll-y="true"
  bindscroll="messageListScrolling"
>
  <block wx:for="{{messageList}}" wx:key="id">
    <view>{{item}}</view>
  </block>
  <!-- 最后加一个垫底的节点 -->
  <view class="last-view" id="{{endId}}" style="height:{{bottomHeight}}px;"></view>
</scroll-view>

autoScroll() {
  let view_id = 'view_id_' + parseInt(Math.random() * 1000000)
  this.setData({
    scrollTo: ''
  })
  this.setData({
    endId: view_id
  })
  this.setData({
    scrollTo: view_id
  })
}