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