uni-app之聊天室页⾯滚动到底部
uni-app 之聊天室滚到最底部
请注意！：知识点为uni-app 与 vue 结合
这次写到聊天室，碰到⼀个emmmmm问题⽐较严重的事情，聊天嘛，咱们想实现的就⽆⾮是，QQ那种聊天的效果嘛，我们研究了，，，，emmmm （n久之长），终于是把这个功能写出来了，代码等什么时候整理出来给⼤家看，今天主要说⼀下碰到的⼀个问题，就是我发送消息的时候，想要将消息弹出，发⼀条弹⼀条，代码附上
注意：scroll-view要设置⾼度
输⼊内容后，必然要在对话界⾯的底部显⽰内容，可以通过uni.pageScrollTo的⽅式，但是这个页⾯刷新的太厉害，输⼊框都刷新了，没法使⽤。所以只能使⽤scroll-view组件。但是通过scroll-view使⽤竖向滚动时，需要给⼀个固定⾼度。为了适配屏幕的⼤⼩，则需要通过计算来确定scroll-view的⾼度。
<view class="content" id="content" :>
<scroll-view id="scrollview"class="chat-window" scroll-y="true" :style="{height: tViewHeight
+ '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="pe" v-for="(item, index) in chatRecord" :key="index"class="m-item">
<!-- 收信⼈ -->
<view class="talk-text talk-left" v-if="pe == '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">{{ssage}}</view>
</view>
</view>
<view class="talk-text talk-right" v-if="pe == 'talk-right'">
<!-- 发信⼈消息 -->
<view class="talk-content">
网站底部代码js特效<view class="talk-title">{{ssage}}</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 = SystemInfoSync(); //获取⼿机可使⽤窗⼝⾼度 api为获取系统信息同步接⼝
this.style.pageHeight = res.windowHeight;
tViewHeight = res.windowHeight - SystemInfoSync().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 = ateSelectorQuery();
query.selectAll('.m-item').boundingClientRect();
query.select('#scrollview').boundingClientRect();
<((res) => {
that.style.mitemHeight = 0;
res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40) //获取所有内部⼦元素的⾼度
if (that.style.mitemHeight > (tViewHeight - 100)) { //判断⼦元素⾼度是否⼤于显⽰⾼度
that.scrollTop = that.style.mitemHeight - tViewHeight //⽤⼦元素的⾼度减去显⽰的⾼度就获益获得序⾔滚动的⾼度
}
}）
}
这⼀步做的主要就是获取这个‘.m-item’这个⾥⾯的节点信息 uni-app虽然不⽀持window和document 但是咱们还是有⼀个api可以获取他元素的信息的就算是ateSelectorQuery（）这个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 = ateSelectorQuery();
query.selectAll('.m-item').boundingClientRect();
query.select('#scrollview').boundingClientRect();
<((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 > (tViewHeight - 100)) { //判断⼦元素⾼度是否⼤于显⽰⾼度
that.scrollTop = that.style.mitemHeight - tViewHeight //⽤⼦元素的⾼度减去显⽰的⾼度就获益获得序⾔滚动的⾼度
}
}, 100)
}）
}
最后实现了每次聊天都是滚到最底部要是想要进⼊页⾯就滚到最底部呢我们是在socket链接读取⽂件的时候调⽤了这个⽅法
ending~~~~
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论