uniapp聊天页面之消息滚动_uni-app 聊天内容自动滚动到底部

目录

1、HTML部分

2、 Js部分

3、注意，滚动方法调用

1、HTML部分

用整个scroll-view的高度减去所有聊天内容的高度，得到的就是滚动条需要下拉的距离，即可使聊天页下拉至最底部。

需要给 scroll-view一个固定的高度，并获取消息信息的高度。

<view class="content">
		<scroll-view style="background-color: #f5f5f5;" class="chat-window" scroll-y="true" show-scrollbar="true"
			:scroll-with-animation="true" :scroll-top="scrollTop" :style="{height: style.contentViewHeight + 'px'}">
			<view class="all" id='chatContent'>
				<view class="word">
                  <!-- 遍历获取到的消息 -->
					<view v-for="(item ,index) in chatLog" class="cu-chat">
						<!-- 他人信息 -->
						<view class="left-pal" v-show="item.from !== sendData.from">
							<up-image :src="userMap.get(item.from)" width="100rpx" height="100rpx" shape="circle"
								@click="skipDetails"></up-image>
							<view class="container"> {{item.content}}</view>
						</view>
						<!-- 自己发送信息 -->
						<view class="right-own" v-show='item.from === sendData.from'>
							<view class="oneself">
								<view class="container"> {{item.content}}</view>
								<up-image :src="userMap.get(item.from)" width="100rpx" height="100rpx" shape="circle"
									@click="skipMy"></up-image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="base">
			<up-input placeholder="请输入内容" style="background-color: #fff;" border="surround"
				v-model="sendData.content"></up-input>
			<u-button text="发送" type="success" class="button" @click="Send"
				:disabled="sendData.content.length==0"></u-button>
		</view>
	</view>

2、 Js部分

	//定义盒子的初始高度
	const style = ref({
		contentViewHeight: 0,
		mitemHeight: 0
	})
    //contentViewHeight: 消息信息展示, mitemHeight: 消息总高度
 
	onLoad((option) => {
		const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度 
		style.value.contentViewHeight = res.windowHeight - 60;
        // res.windowHeight:屏幕的高度减去,输入框的高度,得到信息的需要展示的高度
	})

/**
	 * @information 跳转页面底部
	 */
	const scrollToBottom = () => {
		let query = uni.createSelectorQuery();
		query.selectAll('.cu-chat').boundingClientRect();
     //获取所有消息节点
 
		query.exec((res) => {
			style.value.mitemHeight = 0;
			res[0].forEach((rect) => style.value.mitemHeight = style.value.mitemHeight + rect.height + 40)
			//获取所有内部子元素的高度,遍历得到总高度
 
			/** 因为vue的虚拟DOM 每次生成的新消息都是之前的，所以采用异步setTimeout   
              * 主要就是添加了这定时器
              */
			setTimeout(
				() => {
					if (style.value.mitemHeight > (style.value.contentViewHeight - 100)) {
						//判断子元素高度是否大于显示高度
						scrollTop.value = style.value.mitemHeight - style.value.contentViewHeight
						//用子元素的高度减去显示的高度就获益获得序言滚动的高度
					}
				}, 100)
		})
	}

3、注意，滚动方法调用

        刚进入页面的时候，有可能会没有滚动效果，这可能是因为消息列表的DOM节点还没有渲染到页面上，滚动的方法变已经执行了，导致滚动效果消失。所以调用的时候最好放在nextTick中。

nextTick(() => {
				scrollToBottom()
			})
//待全部DOM节点加载完后再滚动