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

写在前面

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

涉及技术点

scroll-view有一个属性scroll-into-view：

把新进来的消息，push添加到消息列表messageList中。

但页面不会自动往下滚动。

实现代码

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

<scroll-viewclass="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： /Neveryu

新浪微博： /Neveryu

微信： miracle421354532

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