开始

实现发送信息。
image.png
这里只讲发送文字的。
image.png
拿到时间戳。赋值给time
image.png
判断时间间隔
image.png
参数2是上最后一条信息的时间
image.png

  1. let obj = {
  2.                     isme: true,
  3.                     userpic: "../../static/demo/userpic/10.jpg",
  4.                     type: "img",
  5.                     data: "../../static/demo/3.jpg",
  6.                     time: now,
  7.                     gstime: time.gettime.getChatTime(now,this.list[this.list.length-1].time)
  8.                 };

把这条数据push进去
image.png

  1. submit(data) {
  2.                 // console.log(data);
  3.                 // 构建数据
  4.                 let now = new Date().getTime();
  5.                 let obj = {
  6.                     isme: true,
  7.                     userpic: "../../static/demo/userpic/10.jpg",
  8.                     type: "img",
  9.                     data: "../../static/demo/3.jpg",
  10.                     time: now,
  11.                     gstime: time.gettime.getChatTime(now,this.list[this.list.length-1].time)
  12.                 };
  13.                 this.list.push(obj);
  14.             }

随便发送1条信息
image.png

image.png

image.png

image.png
上下没有显示最新发送的消息。
image.png

如果信息太多的话 就会太卡。外层套一个scroll-view
image.png

  1. <scroll-view scroll-y="true">
  3.  </scroll-view>

image.png
表示滚动条的位置。
image.png

  1. scrollTop: 0,

image.png
内容高度
image.png

  1. style:{
  2.                     contentH:0
  3.                 },

image.png

  1. :style="{height:style.contentH+'px'}"

image.png

image.png
methods内增加方法initdata()
image.png
拿到当前窗口的高度减去 发消息文本框的高度。
image.png
我们之前定义的是120
image.png
这里获取的高度是px ，所以需要把upx转换为px
image.png

image.png

  1. initdata() {
  2.                 try {
  3.                     const res = uni.getSystemInfoSync();
  4.                     this.style.contentH = res.windowHeight - uni.upx2px(120);
  5.                 } catch (e) {}
  6.             },

页面加载的时候调用。
image.png

  1. onLoad() {
  2.             this.getData();
  3.             this.initdata();
  4.         },

上拉显示最新的消息。
image.png
发送的消息需要滚动 到最下面才能看到消息。
image.png

image.png

发送消息后，滚动条自动滚到最下面。

聊天列表数据的总的和 就是 滚动条最下面的高度。
image.png

加一个id
image.png

  1.  id="scrollview"

组件列表组件 最外层的view 要有这个class
image.png

  1. <view class="user-chat-item">

这个方法类似于html里面获取dom的元素。
image.png

image.png
拿到对象实例就可以使用下面的方法 。
image.png
滚动置于底部的方法
image.png
选择器的说明。
image.png
selector返回的是NodeRef对象。、
image.png
执行上面，返回一个回调函数。
image.png
调用方法 必须在onReady里面
image.png

image.png

image.png

image.png
我们用到第二个数组，就是聊天列表的dom元素。
image.png
定义itemH 属性
image.png

拿到每一个聊天列表的高度。

image.png

  1. q.exec((res)=>{
  2.                     // console.log(JSON.stringify(res));
  3.                     res[1].forEach((ret)=>{
  4.                         this.style.contentH += ret.height;
  5.                     });
  6.                 });

如果大于可视区域
image.png

image.png

  1. if(this.style.contentH > this.style.contentH) {
  2.                         this.scrollTop=this.style.contentH;
  3.                     }

每次提交消息 都要置于底部
image.png
自动到底部
image.png

本节代码

user-chat.vue页面

  1. <template>
  2.     <view class="user-chat-item">
  3.         <scroll-view id="scrollview" scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true"
  4.             :style="{height:style.contentH+'px'}">
  5.             <!-- 聊天列表 -->
  6.             <block v-for="(item,index) in list" :key="index">
  7.                 <user-chat-list :item="item" :index="index"></user-chat-list>
  8.             </block>
  9.             <!-- 输入框 -->
  10.             <user-chat-bottom @submit="submit"></user-chat-bottom>
  11.         </scroll-view>
  12.     </view>
  13. </template>
  15. <script>
  16.     import userChatBottom from '@/components/user-chat/user-chat-bottom.vue';
  17.     import time from '../../common/time.js';
  18.     import userChatList from '@/components/user-list/user-chat-list.vue';
  19.     export default {
  20.         components: {
  21.             userChatBottom,
  22.             userChatList
  23.         },
  24.         data() {
  25.             return {
  26.                 scrollTop: 0,
  27.                 style: {
  28.                     contentH:0,
  29.                     itemH:0
  30.                 },
  31.                 list: [{
  32.                         isme: false,
  33.                         userpic: "../../static/demo/userpic/11.jpg",
  34.                         type: "text",
  35.                         data: "哈哈哈",
  36.                         time: "1555146412"
  37.                     },
  38.                     {
  39.                         isme: true,
  40.                         userpic: "../../static/demo/userpic/10.jpg",
  41.                         type: "img",
  42.                         data: "../../static/demo/3.jpg",
  43.                         time: "1555146414",
  44.                     }
  45.                 ]
  46.             }
  47.         },
  48.         onLoad() {
  49.             this.getData();
  50.             this.initdata();
  51.         },
  52.         onReady(){
  53.             this.pageToBottom();
  54.         },
  55.         methods: {
  56.             // 初始化参数
  57.             initdata() {
  58.                 try {
  59.                     const res = uni.getSystemInfoSync();
  60.                     this.style.contentH = res.windowHeight - uni.upx2px(120);
  61.                     console.log('contentH:',this.style.contentH);
  62.                 } catch (e) {}
  63.             },
  64.             pageToBottom(){
  65.                 let q=uni.createSelectorQuery();
  66.                 q.select('#scrollview').boundingClientRect();
  67.                 q.selectAll('.user-chat-item').boundingClientRect();
  68.                 q.exec((res)=>{
  69.                     // console.log(JSON.stringify(res));
  70.                     res[1].forEach((ret)=>{
  71.                         this.style.itemH += ret.height;
  72.                     });
  73.                     if(this.style.itemH > this.style.contentH) {
  74.                         console.log('itemH 大于 contentH =>')
  75.                         this.scrollTop=this.style.itemH;
  76.                     }
  77.                 });
  78.             },
  79.             getData() {
  80.                 // 从服务器获取到的数据
  81.                 let arr = [{
  82.                         isme: false,
  83.                         userpic: "../../static/demo/userpic/11.jpg",
  84.                         type: "text",
  85.                         data: "哈哈哈",
  86.                         time: "1555146412"
  87.                     },
  88.                     {
  89.                         isme: true,
  90.                         userpic: "../../static/demo/userpic/10.jpg",
  91.                         type: "img",
  92.                         data: "../../static/demo/3.jpg",
  93.                         time: "1555146414",
  94.                     },
  95.                 ];
  96.                 for (let i = 0; i < arr.length; i++) {
  97.                     arr[i].gstime = time.gettime.getChatTime(arr[i].time, i > 0 ? arr[i - 1].time : 0);
  98.                 }
  99.                 this.list = arr;
  100.             },
  101.             submit(data) {
  102.                 // console.log(data);
  103.                 // 构建数据
  104.                 let now = new Date().getTime();
  105.                 let obj = {
  106.                     isme: true,
  107.                     userpic: "../../static/demo/userpic/10.jpg",
  108.                     type: "img",
  109.                     data: "../../static/demo/3.jpg",
  110.                     time: now,
  111.                     gstime: time.gettime.getChatTime(now, this.list[this.list.length - 1].time)
  112.                 };
  113.                 this.list.push(obj);
  114.                 this.pageToBottom();
  115.             }
  116.         }
  117.     }
  118. </script>
  120. <style>
  122. </style>

结束