![cover](https://img-blog.csdnimg.cn/25069a8372ab4114a09202e2a46849a4.jpg)
微信小程序 scroll-view 实现自动滑动到底部
<scroll-viewclass="scroll-wrapper"scroll-into-view="{{scrollTo}}"scroll-y="true"bindscroll="messageListScrolling"><block wx:for="{{messageList}}" wx:key="id"><view>你的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
更多学习资源请关注我的新浪微博…好吗
更多推荐
所有评论(0)