高品质的佛山网站建设,网站建设法规政策,品牌建设的创新与特色,怎么申请 免费网站目录 问题
组件
页面
使用的API
总结 问题
当你发一个消息#xff0c;但是消息却需要你自己向下滑你才能看见#xff0c;否则一直呗输入框挡住。 组件
scroll-view组件#xff1a;一般使用scroll-view组件的都采取使用其scroll-into-view或者scroll-to属性。
scroll-…目录 问题
组件
页面
使用的API
总结 问题
当你发一个消息但是消息却需要你自己向下滑你才能看见否则一直呗输入框挡住。 组件
scroll-view组件一般使用scroll-view组件的都采取使用其scroll-into-view或者scroll-to属性。
scroll-top属性需要计算父容器和子容器的高度差scroll-into-view我只能说非常难用特别是ID这个限制我在v-for中为每个聊天信息设置id使用index最大的拼接出最底层消息的id结果没有效果... 页面
scroll-view scroll-ytrue :scroll-topscrollTop idscroll classscroll tapExtend false view classcontent idchatListview classChatview v-for(item, index) in historyChat :keyindexchat :img_pathitem.imgPath :megitem.message :is_robotitem.robot classchats/chat/view/view/view/scroll-view chat是我自己封装的组件没公布写法可以参考我之前的文章http://t.csdnimg.cn/Di6Xo 使用的API
主角uni.pageScrollTo 这个API的描述是可以将页面滚动到目标位置单位px。可以指定滚动到具体的scrollTop数值也可以指定滚动到某个元素的位置。 注意这个滚动的位置是从页面的顶部开始计算的 配角uni.createSelectorQuery()
这个方法返回一个SelectorQuery对象实例其通过绑定id返回一个 NodesRef 对象实例可以用于获取节点信息。
idString节点的 IDdatasetObject节点的 datasetleftNumber节点的左边界坐标rightNumber节点的右边界坐标topNumber节点的上边界坐标bottomNumber节点的下边界坐标widthNumber节点的宽度heightNumber节点的高度
而 NodesRef 对象带有boundingClientRect方法可以获取某个节点信息。 总结
那么思路已经很清晰了使用uni.pageScrollTo 让滚动到目标位置scrollTop设置为页面的高度不就可以了
uni.createSelectorQuery()锁定scroll-view的id使用 NodesRef 对象返回的只有height信息
// 滚动至聊天底部scrollToBottom: function(){const query uni.createSelectorQuery();query.select(#scroll).boundingClientRect((rect) {if (rect) {uni.pageScrollTo({scrollTop: rect.height,duration: 300 // 滚动动画持续时间单位 ms});}});query.exec();},
