主要代码

class中的样式在uniapp交友项目样式列表 《uniapp交友项目样式列表》中查看
input框中的，:adjust-position=”false” 在键盘弹起时，是否向上顶起页面

  1. <template>
  2.     <view>
  3.         <!-- 聊天列表 -->
  4.         <scroll-view scroll-y :style="'height:' + scrollH + 'px;'">
  5.             <block v-for="(item,index) in list " :key="index">
  6.                 <!-- 左侧气泡 --> 
  7.         //:style="item.user_id === 1   item.user_id的值是1时，表示这一条消息是当前账号的，
  8.         //显示在左侧，反之显示在右侧
  9.                 <view class="flex align-start px-2 my-2"
  10.                     :style="item.user_id === 1 ? '' : 'flex-direction:row-reverse'">
  11.                     <image :src="item.avatar" 
  12.                         style="width: 100rpx;height: 100rpx;"
  13.                         class="rounded-circle"
  14.                         ></image>
  15.                     <view class="bg-light p-2 rounded mx-2" style="max-width: 400rpx;min-width: 100rpx;">
  16.                         {{item.data}}
  17.                     </view>
  18.                 </view>
  19.                 <!-- 右侧气泡 -->
  20.                 <!-- <view class="flex align-start px-2  my-2" style="flex-direction:row-reverse">
  21.                     <image :src="item.avatar"
  22.                         style="width: 100rpx;height: 100rpx;"
  23.                         class="rounded-circle"
  24.                         ></image>
  25.                     <view class="bg-light p-2 rounded mx-2" style="max-width: 400rpx;min-width: 100rpx;">
  26.                         {{item.data}}
  27.                     </view>
  28.                 </view> -->
  29.             </block>
  30.         </scroll-view>
  32.         <!-- 底部操作条     -->
  33.         <view class="fixed-bottom flex align-center border-top bg-white" style="height: 100rpx;">
  34.             //:adjust-position="false"  在键盘弹起时，是否向上顶起页面
  35.       <input type="text" 
  36.         :adjust-position="false" 
  37.         class="flex-1 rounded bg-light ml-2" style="padding: 5rpx;" placeholder="请文明喷人">
  38.             <view class="iconfont icon-fabu flex align-center justify-center font-md animated " 
  39.                 hover-class="jello text-main"
  40.                 style="width: 100rpx; ">
  41.             </view>
  42.         </view>
  43.     </view>
  44. </template>
  46. <script>
  47.     // 模拟当前登录的用户的userid
  48.     const uid = 1;
  49.     export default {
  50.         data() {
  51.             return {
  52.                 scrollH:500,
  53.                 list:[{
  54.                     avatar:"/static/default.jpg",
  55.                     username:"昵称",
  56.                     data:"我好啊",
  57.                     type:"text",
  58.                     create_time:1570783999,
  59.                     user_id:2,//当为2时 不是当前用户，显示在右侧
  60.                 },
  61.                 {
  62.                     avatar:"/static/default.jpg",
  63.                     username:"昵称",
  64.                     data:"我好啊",
  65.                     type:"text",
  66.                     create_time:1570783999,
  67.                     user_id:1,//当为1时 是当前用户，显示在左侧
  68.                 }]
  69.             }
  70.         },
  71.         onLoad() {
  72.             uni.getSystemInfo({
  73.                 success(res) {
  74.                     this.scrollH = res.windowHeight - uni.upx2px(101)
  75.                 }
  76.             })
  77.         },
  78.         methods: {
  80.         }
  81.     }
  82. </script>
  84. <style>
  86. </style>

页面配置（page.json）

  1. {
  2.     "path" : "pages/user-chat/user-chat",
  3.     "style" :                                                                                    
  4.     {
  5.         "app-plus": {
  6.         "bounce": "none",//关闭回弹的效果
  7.           "titleNView": {
  8.             "buttons": [
  9.               {
  10.         "color": "#333333",
  11.         "colorPressed": "#FD597C",
  12.         "float": "right",
  13.         "fontSize": "20px",
  14.         "fontSrc": "/static/iconfont.ttf",
  15.         "text": "\ue628"
  16.       }
  17.             ]
  18.           }
  19.         }
  20.     }
  22. }

image.png

组件化

  1. <template>
  2.     <view>
  3.         <!-- 聊天列表 -->
  4.         <scroll-view scroll-y :style="'height:' + scrollH + 'px;'">
  5.             <block v-for="(item,index) in list " :key="index">
  6.                 <userChatList :index="index" :item="item" :pretime="index > 0 ? list[index-1].create_time : 0"></userChatList>
  7.             </block>
  8.         </scroll-view>
  10.         <!-- 底部操作条     -->
  11.         <view class="fixed-bottom flex align-center border-top bg-white" style="height: 100rpx;">
  12.             <input type="text"
  13.                 :adjust-position="false"
  14.                 v-model="content"
  15.                 class="flex-1 rounded bg-light ml-2" style="padding: 5rpx;" placeholder="请文明喷人">
  16.             <view class="iconfont icon-fabu flex align-center justify-center font-md animated " 
  17.                 @click="submit"
  18.                 hover-class="jello text-main"
  19.                 style="width: 100rpx; ">
  20.             </view>
  21.         </view>
  22.     </view>
  23. </template>
  25. <script>
  26.     import userChatList from "@/components/user-chat/user-chat-list.vue"
  28.     export default {
  29.         components:{
  30.             userChatList
  31.         },
  32.         data() {
  33.             return {
  34.                 content:"",
  35.                 scrollH:500,
  36.                 list:[{
  37.                     avatar:"/static/default.jpg",
  38.                     username:"昵称",
  39.                     data:"我好啊",
  40.                     type:"text",
  41.                     create_time:1570783999,
  42.                     user_id:2,//当为2时 不是当前用户，显示在右侧
  43.                 },
  44.                 {
  45.                     avatar:"/static/default.jpg",
  46.                     username:"昵称",
  47.                     data:"我好啊",
  48.                     type:"text",
  49.                     create_time:1570783999,
  50.                     user_id:1,//当为1时 是当前用户，显示在左侧
  51.                 }]
  52.             }
  53.         },
  54.         onLoad() {
  55.             uni.getSystemInfo({
  56.                 success(res) {
  57.                     this.scrollH = res.windowHeight - uni.upx2px(101)
  58.                 }
  59.             })
  60.         },
  61.         methods: {
  62.             // 发送
  63.             submit() {
  64.                 let obj = {
  65.                     avatar:"/static/default.jpg",
  66.                     username:"昵称",
  67.                     data:this.content,
  68.                     type:"text",
  69.                     create_time:(new Date()).getTime(),
  70.                     user_id:1,//当为1时 是当前用户，显示在左侧
  71.                 }
  72.                 if(this.content === "") {
  73.                     // 消息提示
  74.                     return uni.showToast({
  75.                         title:"消息不能为空",
  76.                         icon:"none"
  77.                     })
  78.                 }
  79.                 this.list.push(obj)
  80.             }
  81.         }
  82.     }
  83. </script>
  85. <style>
  87. </style>
  1. <template>
  2.     <view class=".icon-nv">
  3.         <!-- 时间显示 -->
  4.         <view v-if="shortTime" class="py-2 flex align-center justify-center font-sm text-light-muted">
  5.             {{shortTime}}
  6.         </view>
  7.         <!-- 消息显示 -->
  8.         <view class="flex align-start px-2 my-2"
  9.             :style="isSelf ? '' : 'flex-direction:row-reverse'">
  10.             <image :src="item.avatar" 
  11.                 style="width: 100rpx;height: 100rpx;"
  12.                 class="rounded-circle"
  13.                 ></image>
  14.             <view class="bg-light p-2 rounded mx-2" style="max-width: 400rpx;">
  15.                 {{item.data}}
  16.             </view>
  17.         </view>
  19.     </view>
  20. </template>
  22. <script>
  23.     // 引入时间库
  24.     import $T from "@/common/time.js"
  25.     // 模拟当前登录的用户的userid
  26.     const uid = 1;
  27.     export default {
  28.         props:{
  29.             item:Object,
  30.             index:Number,
  31.             pretime:[Number,String]
  32.         },
  34.         computed:{
  35.             // 是否是登录用户本人
  36.             isSelf(){
  37.                 return uid === this.item.user_id
  38.             },
  39.             // 转换时间
  40.             shortTime() {
  41.                 return $T.getChatTime(this.item.create_time,this.pretime)
  42.             }
  43.         }
  44.     }
  45. </script>
  47. <style>
  48. </style>

监听键盘的高度变化，防止键盘弹起将页面挤上去

input的adjust-position属性

1：input框中的，:adjust-position=”false” 在键盘弹起时，是否向上顶起页面

uni.onKeyboardHeightChange()

2：监听键盘的高度变化,只在app端和小程序端可以使用