uni-app 之 聊天室滚到最底部
请注意 !: 知识点为uni-app 与 vue 结合
这次写到聊天室,碰到一个emmmmm问题比较严重的事情,聊天嘛,咱们想实现的就无非是微信,QQ那种聊天的效果嘛,我们研究了,,,,emmmm (n久之长),终于是把这个功能写出来了,代码等什么时候整理出来给大家看,今天主要说一下碰到的一个问题,就是我发送消息的时候, 想要将消息弹出,发一条弹一条,代码附上
注意:scroll-view要设置高度
输入内容后,必然要在对话界面的底部显示内容,可以通过uni.pageScrollTo的方式,但是这个页面刷新的太厉害,输入框都刷新了,没法使用。所以只能使用scroll-view组件。但是通过scroll-view使用竖向滚动时,需要给 一个固定高度。为了适配屏幕的大小,则需要通过计算来确定scroll-view的高度。
<view class="content" id="content" :style="{height: style.contentViewHeight + ‘px‘}"> <scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + ‘px‘}" :scroll-with-animation="true" :scroll-top="scrollTop"> <!-- <view class="chat-window"> --> <view class="small-talk_time">12:18</view> <!-- 聊天内容 --> <view class="content-all"> <!-- 聊天窗口 --> <view :class="item.type" v-for="(item, index) in chatRecord" :key="index" class="m-item"> <!-- 收信人 --> <view class="talk-text talk-left" v-if="item.type == ‘talk-left‘"> <!-- 收信人头像 --> <view class="talk-photo"> <image src="../../static/images/myself.jpg" class="talk-img"></image> </view> <!-- 收信人消息 --> <view class="talk-content"> <view class="talk-huge"></view> <view class="talk-title">{{item.message}}</view> </view> </view> <view class="talk-text talk-right" v-if="item.type == ‘talk-right‘"> <!-- 发信人消息 --> <view class="talk-content"> <view class="talk-title">{{item.message}}</view> <view class="talk-huge"></view> </view> <!-- 发信人头像 --> <view class="talk-photo"> <image src="../../static/images/myself.jpg" class="talk-img"></image> </view> </view> </view> </view> <!-- </view> --> </scroll-view> </view>
既然是聊天 先将聊天页面写出来 写好了你说我说的样式 大概就是这个样子
接下来是咱们的js了
created () {
const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度 api为获取系统信息同步接口
this.style.pageHeight = res.windowHeight;
this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) - 70; //像素 因为给出的是像素高度 然后我们用的是upx 所以换算一下
this.scrollToBottom(); //创建后调用回到底部方法
},
export default { data (){ // 聊天页面时时滚动样式 style: { pageHeight: 0, contentViewHeight: 0, footViewHeight: 90, mitemHeight: 0 }, }}
js代码:
/** * @author gongliying * @date 2019-07-26 * @information 跳转页面底部 */ scrollToBottom: function () { let that = this; let query = uni.createSelectorQuery(); query.selectAll(‘.m-item‘).boundingClientRect(); query.select(‘#scrollview‘).boundingClientRect(); query.exec((res) => { that.style.mitemHeight = 0; res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40) //获取所有内部子元素的高度 if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判断子元素高度是否大于显示高度 that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight //用子元素的高度减去显示的高度就获益获得序言滚动的高度 } }) }
这一步做的主要就是获取这个‘.m-item’这个里面的节点信息 uni-app虽然不支持window和document 但是咱们还是有一个api可以获取他元素的信息的 就算是uni.createSelectorQuery()这个api,他会返回一个 SelectorQuery
对象实例。可以在这个实例上使用 select
等方法选择节点,并使用 boundingClientRect
等方法选择需要查询的信息。这个exec()他会执行这里面所有的请求,我们最后会获取到他的id dataset 左边界坐标 右边界坐标 上边界坐标 下边界左边 节点的宽度 节点的高度 具体的这个方法的使用可以去官网查看一番,我就不具体解释了 毕竟今天重点不是他呀 回到 原题 咱们说了 在最开始created的时候获取你当前使用手机的品牌啊 型号啊 我们这里主要的是获取可使用窗口的高度 然后我们又获取了所有子元素的告诉 然后就可以看着我的注释走了~~~~
但是呢。你们不要以为这样就好了 , 还有一个很重要的事情,如果你们认真看了这段代码还有就是实验了一下, 你们会发现到最后那个滚动条没有滚动到最底部,会发现最后一调消息被隐藏了,也不是没有 ,页面上有这条消息,但是呢就是没有弹出来,后来呢,
仔细分析了一下,因为由于vue采用虚拟dom,我每次生成新的消息时获取到的div的scrollHeight的值是生成新消息之前的值,所以造成每次都是最新的那条消息被隐藏掉了!这就是开头我跟大家说注意这是uni-app和vue结合的原因了
解决方法:采用异步处理settimeout函数获取最新的scrollheight 让他先全部执行完了之后去走这个异步,这样就能确保滚动条每次滚到的都是最底部 上段代码更改如下:
/** * @author gongliying * @date 2019-07-26 * @information 跳转页面底部 */ scrollToBottom: function () { let that = this; let query = uni.createSelectorQuery(); query.selectAll(‘.m-item‘).boundingClientRect(); query.select(‘#scrollview‘).boundingClientRect(); query.exec((res) => { that.style.mitemHeight = 0; res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40) //获取所有内部子元素的高度
// 因为vue的虚拟DOM 每次生成的新消息都是之前的,所以采用异步setTimeout 主要就是添加了这红字
setTimeout(() => {
if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判断子元素高度是否大于显示高度 that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight //用子元素的高度减去显示的高度就获益获得序言滚动的高度 } }, 100) }) }
最后实现了每次聊天都是滚到最底部 要是想要进入页面就滚到最底部呢 我们是在socket链接读取文件的时候调用了这个方法
ending~~~~
原文地址:https://www.cnblogs.com/gongliying/p/11258189.html