需求是对话列表收到新消息后，需要自动将 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 值的计算不够精确，但肯定实现了需求，之后如有发现精确计算的方式会验证并更新本篇内容。
完毕。
需求是对话列表收到新消息后，需要自动将 scroll-view 滚动至底部显示最新对话消息。使用wx.create...
scroll-view 是什么? 微信小程序滚动视图，分为横向滚动，纵向滚动。以及滚动事件。 如何用? 纵向滚动-...
上拉加载 借助小程序组件scroll-view bindscrolltolower滚动到底部/右边，会触发 scr...
究极干货，完美实现微信小程序商品左右联动scroll-view的实现及性能优化,点击左边，右边滚动；右边滚动，左边...
在之前的文章中我相信大家对scroll-view有一定的了解，微信小程序如何实现scroll-view隐藏滚动条也...
微信小程序去除scroll-view组件右边滑动条样式，但不会影响滑动效果/* 隐藏滚动条 */::-webkit...
网页开发的时候往往会为了页面的美观，而选择去掉滚动区域默认的滚动条。微信小程序实现scroll-view隐藏滚动条...
微信小程序使用scroll-view横向布局在iOS和Android上有不同的展示，iOS无滚动条，Android...
小程序小坑之一 ：在使用scroll-view的时候，发现滚动到顶部或者底部的时候，即使有设置bindscroll...
小程序 scroll-view 去除滚动条 :
本文标题：微信小程序 scroll-view 滚动至底部
本文链接：https://www.haomeiwen.com/subject/pndphqtx.html
网友评论