目录

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节点加载完后再滚动