关于 uniapp scroll-view聊天自动滚动到底部

原创

已于 2022-05-29 10:27:02 修改 · 3.8k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2022-05-25 17:48:16 首次发布

本文介绍了一种在uni-app中实现聊天界面自动滚动到底部的方法。通过监听列表内容的变化并计算其高度，确保每次更新都能平滑滚动到最新消息的位置。

需求：一般在scroll-view中会放置一个list列表，当列表条目增加的时候，使其自动滚动到底部显示最后一条
效果图下图：
刚开始进入的时候
在这里插入图片描述
这里自动撑开了

点击加号图标恢复原来的样子

实现了聊天自动滚动到底部

这是最终效果图其他的可以自己自行补全

在这里插入图片描述

全部代码都在这里了包括样式，图片自己随便放上去就行了希望帮住到大家不喜勿喷
**

前提条件 uniapp uview-ui 必须引入不然样式会出错

<template>
	<view>
		<view class="indexTop">
			<view class="location">
				<view class="" style="">
					<u-icon name="arrow-left" color="#000000" size="44"></u-icon>
				</view>
			</view>
			<view class="navName">
				<view class="name">
					李科奇
				</view>
				<view class="jobName">
					高级产品经理
				</view>
			</view>
			
			<view class="menu">
				<view class="mentItem">
					<view class="">
						<img src="/static/img/chat_phone.png" alt="">
					</view>
					<view class="mentItemTxt">
						换电话
					</view>
				</view>
				
				<view class="mentItem marginLeft124">
					<view class="">
						<img src="/static/img/chat_weixin.png" alt="">
					</view>
					<view class="mentItemTxt">
						换微信
					</view>
				</view>
				
				<view class="mentItem marginLeft124">
					<view class="">
						<img src="/static/img/chat_jianli.png" alt="">
					</view>
					<view class="mentItemTxt">
						发简历
					</view>
				</view>
				
				<view class="mentItem marginLeft124">
					<view class="">
						<img src="/static/img/chat_gengduo.png" alt="">
					</view>
					<view class="mentItemTxt">
						更多
					</view>
				</view>
			</view>
		</view>
		<view class="" style="width: 100%;height: 270rpx;"></view>
		
		
		<view class="scrollViewContent" id="scrollViewContent" :style="{height: contentViewHeight + 'px'}">
			
			<scroll-view class="scrollview" id="scrollview" scroll-y="true" :scroll-top="scrollTop"
				:style="{height: contentViewHeight + 'px'}">
				<view id="msglistview">
					
					<!-- 求职者 -->
					<view class="job">
						<view class="jobName">
							<view class="position">
								电话销售
							</view>
							
							<view class="price">
								8千-1.2万
							</view>
						</view>
						<view class="tabs">
							<view class="tab">
								学历不限
							</view>
							
							<view class="tab margin-left">
								3-5年
							</view>
							<view class="tabRed">
								<u-icon name="clock" color="#FF4747" size="30" top="3"></u-icon>
								截止:04-10 15:00
							</view>
						</view>
						
						<view class="company"&