uniapp聊天室功能(scroll-view的使用)
scroll-view自动滚动到底部
·
仿聊天功能,发送一条信息,页面自动滚动到底部,这里有两种方法
scroll-view的scroll-into-view和scroll-top两个属性
首先说scroll-into-view属性
scroll-into-view解释:
值应为某子元素id
id不能以数字开头
设置的哪个方向滚动,就滚动到对应id元素、
所以这个属性的用法就是每次发送完消息后,给这条消息设置id,然后滚动到对应id位置
<scroll-view scroll-y :style="{height:(useHeight - 100) + 'px'}" :scroll-into-view="scrollView" scroll-with-animation @scroll="scroll">
//循环聊天内容内容内容
</scroll-view>
//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差不多,都是定位到最后一条的位置,发送完消息后,设置滚动条到底部
<scroll-view scroll-y :style="{height:(useHeight - 100) + 'px'}" :scroll-top="scrollTop" scroll-with-animation @scroll="scroll">
//循环消息内容
</scroll-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 = ''
},
注:scroll-view要有明确的高度
scroll-into-view的id不能重复
scroll-into-view在小程序有时不生效
更多推荐
已为社区贡献4条内容
所有评论(0)