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

写在前面

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

涉及技术点

scroll-view 有一个属性 scroll-into-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
  })
}

需要说明的是：这里的 3 个 this.setData 不能合并成一个

需要滚动到最底部时，调用 autoScroll 方法即可滚动到最底部。

——————————【正文完】——————————

前端学习交流群，想进来面基的，可以加群： 685486827，832485817；

写在最后： 约定优于配置 —— 软件开发的简约原则

——————————【完】——————————

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu
微信： miracle421354532

更多学习资源请关注我的新浪微博…好吗