前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序 scroll-view 滚动至底部

微信小程序 scroll-view 滚动至底部

作者头像
码脑
发布2019-04-11 15:08:45
2.9K0
发布2019-04-11 15:08:45
举报
文章被收录于专栏:大前端

        需求是对话列表收到新消息后,需要自动将 scroll-view 滚动至底部显示最新对话消息。         使用 wx.createSelectorQuery().select('#viewId').boundingClientRect 方式获取高度时,发现数据更新后并不能获取最新view 高度,而是再次手动滑动至底部后 rect 对象内包含的 bottom / height 数值才会更新,当然了,这样小伙伴无法愉快的玩耍,随使用另一种方法,即 scroll-view 的标签 scroll-top 来实现此功能。         运行效果如下:

实现步骤(分2部分 .wxml 和 .js ) 1.  .wxml文件中指定竖向滚动条位置 scroll-top='{{scrollTop}}' ,单位 px,2.4.0起支持 rpx 。

2.  收到新消息时,.js 文件中更新 scrollTop 值。

缺点:此方式下 scrollTop 值的计算不够精确,但肯定实现了需求,之后如有发现精确计算的方式会验证并更新本篇内容。 完毕。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.12.12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档