uniapp聊天室功能（scroll

2023-02-12 23:33| 来源: 网络整理| 查看: 265

仿聊天功能，发送一条信息，页面自动滚动到底部，这里有两种方法

scroll-view的scroll-into-view和scroll-top两个属性

首先说scroll-into-view属性

scroll-into-view解释：

值应为某子元素id

id不能以数字开头

设置的哪个方向滚动，就滚动到对应id元素、

所以这个属性的用法就是每次发送完消息后，给这条消息设置id，然后滚动到对应id位置

//循环聊天内容内容内容 //input确定事件 confirm(e){ this.myinfo.push({id:this.myinfo.length+1,desc:this.keyword,type:1}) this.keyword = '' //每次发送消息后重新赋值id this.scrollView = 's-' + (this.myinfo.length+1) },

第二种是scroll-top属性

scroll-top解释：设置竖向滚动条位置

跟scroll-into-view差不多，都是定位到最后一条的位置，发送完消息后，设置滚动条到底部

//循环消息内容 //input确定事件 confirm(e){ this.myinfo.push({id:this.myinfo.length+1,desc:this.keyword,type:1}) //设置滚动条到底部 this.scrollTop = 1000 * this.myinfo.length //这里乘1000不是固定的，乘1000是肯定到底部了 this.keyword = '' },