聊天页面的实现及scroll-view组件的使用

fengchuanyu 2023-01-13 02:44:18

课时名称	课时知识点
聊天页面的实现及scroll-view组件的使用	聊天页面的实现及scroll-view组件的使用

...全文

149 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

本文介绍了在uni-app中实现scroll-view自动滚动到底部的方法，并通过节流函数控制触发频率。首先，通过scroll-view组件的scroll-top属性设置容器竖向滚动条位置，实现滚动到底部的效果。具体实现步骤包括：在HTML中设置scroll-view固定高度并允许纵向滚动，scrollTop值通过变量动态改变；在JS中通过类名获取scroll-view和内容容器的高度，动态设置scrollTop值。此外，为了在频繁触发场景下降低执行频率，可以使用节流函数throttle，确保方法在规定时间内只执行一次。最后，当scroll-view内容改变时，调用chatScrollTop方法即可实现自动滚动到底部的效果。

本文通过实例代码给大家介绍了微信小程序使用scroll-view标签实现自动滑动到底部功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧

uniapp-chat 在mui中有chat界面的例子，升级到uni-app后，没有类似的模板，因此模仿写了一个。遇到了一些坑，在此一一记录下来。当然，由于是新手，可能有些坑可以避开。 scroll-view高度的设置输入内容后，必然要在对话界面的底部显示内容，但是在uni-app下不知道如何能操作DOM来显示和定位，有说需要通过uni.pageScrollTo的方式，但是这个页面刷新的太厉害，输入框都刷新了，没法使用。所以只能使用scroll-view组件。但是通过scroll-view使用竖向滚动时，需要给一个固定高度。为了适配屏幕的大小，则需要通过计算来确定scroll-view的高度。 <scroll-view id="scrollview" :style="{height:style.contentViewHeight+'px'}" :scroll-with-animat

社交应用中，onPullDownRefresh下拉加载历史消息，与页面上的消息合并，滚动到下拉之前，页面不闪

【配置简单】仅需两步（绑定网络请求方法、绑定分页结果数组）轻松完成完整下拉刷新，上拉加载更多功能。【低耦合，低侵入】分页自动管理。在page中无需处理任何分页相关逻辑，无需在data中定义任何分页相关变量，全由z-paging内部处理。【超灵活，支持各种类型自定义】支持自定义下拉刷新，自定义上拉加载更多，自带自定义下拉刷新效果，及其他数十种自定义属性。【功能丰富】支持国际化，支持自定义且自动管理空数据图，支持主题模式切换，支持本地分页，支持聊天分页模式，支持展示最后更新时间，支持吸顶效果，支持内部scroll-view滚动与页面滚动，支持一键滚动到顶部等诸多功能。【全平台兼容】支持nvue，vue3，支持h5、app及各家小程序。【高性能】在app-vue、h5、微信小程序、QQ小程序上使用wxs+renderjs从视图层实现下拉刷新；支持虚拟列表，轻松渲染万级数据！

冯传宇的课程社区_NO_1

1

社区成员

85

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章