效果圖：

1.2.?3.

---

代碼截圖

命名不標準自行修改

標簽代碼：

js代碼：

css樣式代碼：

上代碼：

自己新建一個文件夾 名字隨便起 代碼整進去直接預覽即可

<template><view class="content"><!-- 聊天渲染列表 --><view style="height: 100vh;" @click='touchend'><view v-for="item in newsList" :key="item"><text v-if="item.text">{{item.text}}</text><image v-if="item.img" :src="item.img" mode="scaleToFill" class="touch-active" /><video v-if="item.video" :src="item.video"></video></view></view><!-- 底部輸入 --><view class="input-box" :class="{ 'input-box-mpInputMargin': mpInputMargin }"><view class="input-box-flex"><!--彈出常用 --><image class="icon_img" :src="require('@/static/ico/often.png')" @click="oftenx"></image><!-- 輸入框 --><view class="input-box-flex-grow"> <input type="text" class="contenxxt" id="input" v-model="formData.content" :hold-keyboard="true" :confirm-type="'send'" :confirm-hold="true" placeholder-style="color:#DDDDDD;" :cursor-spacing="10" /> </view><!-- 選擇表情包 --><image class=" icon_btn_add" :src="require('@/static/ico/emoji.png')" @click="exprec"></image><!-- 發送消息按鈕 --><text class="send-out iconfont icon-fasong" @click="sendout" v-if="formData.content!==''"></text><!-- 彈出拍照--><image class=" icon_btn_add" :src="require('@/static/ico/more.png')" v-else @click="switchFun"></image></view><!-- 彈出拍照--><view class="fun-box" :class="{'show-fun-box':showFunBtn}"><u-grid :col="4" hover-class="contentType2-hover-class" :border="false"><u-grid-item v-for="(item, index) in funList" @click.stop="clickGrid(index)" :index="index" :key="index" bg-color="#f3f3f3"><u-icon :name="item.icon" :size="52"></u-icon><view class="grid-text">{{ item.title }}</view></u-grid-item></u-grid></view><!-- 彈出常用聊天 --><view class="fun-box1" :class="{'show-fun-box':showOften}"><scroll-view class="often-super" scroll-y="true"><view class="flex-row" v-for="item in oftenTermList" :key="item" @click.stop="oftenc(item)"><text class="often-text-size">{{item.title}}</text></view></scroll-view></view><!-- 彈出表情 --><view class="fun-box2" :class="{'show-fun-box':showExpre}"><view class="emoji-box emoji-move-in"><scroll-view scroll-y="true" style="height:200px"><view class="list"><text v-for="(item,index) in emojisList" :key="index" @click.stop="expre(item)" class="touch-active">{{item}}</text></view></scroll-view></view></view></view></view> </template> <script> export default {data() {return {imgUrl22: this.$imgUrl22,mpInputMargin: false, //適配微信小程序 底部輸入框高度被頂起的問題//發送的聊天消息formData: {content: "",limit: 15,index: 1,},newsList: [],showFunBtn: false, //是否展示功能型按鈕showOften: false, //是否展示常用showExpre: false, //是否顯示表情//九宮格funList: [{ icon: "photo-fill", title: "照片", uploadType: ["album"] },{ icon: "camera-fill", title: "拍攝", uploadType: ["camera"] },],emojisList: ['😄', '😃', '😀', '😊', '😉', '😍', '😘', '😚', '😗','😙', '😜', '😝', '😛', '😳', '😁', '😔', '😌', '😒','😞', '😣', '😢', '😂', '😭', '😪', '😥', '😰', '😅','😓', '😩', '😫', '😨', '😱', '😠', '😡', '😤', '😖','👦', '👧', '👨', '👩', '👴', '👵', '👱', '👼', '👸','👀', '👍', '👎', '👌', '👊', '?', '?', '👉', '👏','💗', '💛', '💙', '💜', '💚', '?', '💔', '💓', '💕','🌟', '💢', '🏃', '🙅', '💁', '🙋', '💼', '💬', '💭',], //表情包//常用語oftenTermList: [{id: 0,title: "你好，很高興",},{id: 0,title: "在嗎",},],};},onLoad() {},methods: {touchend() {this.showFunBtn = false;//隱藏功能this.showExpre = false;//隱藏表情this.showOften = false;//隱藏常用},sendout() {this.newsList.push({ text: this.formData.content })// let data = this.formData.content// this.$socket.send(JSON.stringify(data));this.formData.content = ''//清空輸入框的文本},//輸入常用消息oftenc(e) {this.formData.content = e.title;},//選擇表情expre(e) {this.formData.content = !this.formData.content ? e : this.formData.content + e;},//切換功能性按鈕switchFun() {this.showOften = false;//隱藏常用this.showExpre = false;//隱藏表情this.showFunBtn = !this.showFunBtn;//顯示功能uni.hideKeyboard();},//是否展示常用oftenx() {this.showFunBtn = false;//隱藏功能this.showExpre = false;//隱藏表情this.showOften = !this.showOften;//顯示常用uni.hideKeyboard();},//是否展示表情exprec() {this.showFunBtn = false;//隱藏功能this.showOften = false;//隱藏常用this.showExpre = !this.showExpre;//顯示表情uni.hideKeyboard();},//點擊宮格時觸發clickGrid(index) {if (index == 0) {this.chooseImage(["album"]);} else if (index == 1) {this.chooseImage(["camera"]);}},//發送圖片chooseImage(sourceType) {console.log(sourceType, "sourceType");uni.chooseImage({sourceType,sizeType: ["compressed"],success: (res) => {console.log(res, "kkkk");this.showFunBtn = false;for (let i = 0; i < res.tempFilePaths.length; i++) {const params = {contentType: 3,content: res.tempFilePaths[i],};this.newsList.push({img: res.tempFilePaths[i]})console.log(this.newsList, '圖片');}},});},//用戶觸摸屏幕的時候隱藏鍵盤touchstart() {uni.hideKeyboard();},}, }; </script><style lang="scss" scoped> page {background-color: #f3f3f3; } .content {.input-box {position: fixed;bottom: 0;left: 0;width: 100%;box-sizing: content-box;z-index: 999;background-color: #f3f3f3;/* #ifdef APP-PLUS */margin-bottom: 0rpx;margin-bottom: constant(safe-area-inset-bottom);margin-bottom: env(safe-area-inset-bottom);/* #endif *//* #ifdef MP-WEIXIN */padding-bottom: 0rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);/* #endif */.input-box-flex {display: flex;justify-content: flex-start;align-items: center;flex-wrap: nowrap;flex-direction: row;padding: 20rpx;box-sizing: border-box;image {width: 63rpx;height: 63rpx;}.icon_img {margin-right: 20rpx;}.icon_btn_add {margin-left: 20rpx;}.send-out {font-size: 65rpx;margin-left: 15rpx;color: #16c694;}.input-box-flex-grow {flex: 1;}.contenxxt {box-sizing: border-box;background-color: #fff;height: 80rpx;padding: 0 20rpx;border-radius: 12rpx;font-size: 28rpx;caret-color: $uni-color-success;}}.fun-box {opacity: 0;transition: all 0.1s ease-in-out;height: 0;.grid-text {padding-top: 10rpx;color: $uni-text-color-grey;}}.fun-box1 {opacity: 0;transition: all 0.1s ease-in-out;height: 0;.often-super {padding: 30rpx;height: 240rpx;background-color: #f3f3f3;width: auto;.flex-row {padding: 10rpx 0;border-bottom: 1rpx #e8e8e8 solid;.often-text-size {color: #5a5a5a;font-size: 26rpx;margin-top: 6rpx;margin-bottom: 6rpx;}}}}.fun-box2 {opacity: 0;transition: all 0.1s ease-in-out;height: 0;.emoji-box {position: relative;height: 200rpx;padding: 5rpx 0;box-sizing: border-box;margin-bottom: -200rpx;background-color: #f3f3f3;.list {display: flex;flex-wrap: wrap;padding: 0 0 0 14rpx;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);.touch-active {width: 65rpx;height: 60rpx;text-align: center;border-radius: 3rpx;line-height: 60rpx;font-size: 38rpx;}}}.emoji-move-in {-webkit-animation: emoji-move-in 0.3s forwards;animation: emoji-move-in 0.3s forwards;}}.show-fun-box {opacity: 1;height: 300rpx;}}.input-box-mpInputMargin {/* #ifdef MP-WEIXIN */padding-bottom: 0rpx;/* #endif */} } </style>

提示：筆記?筆記?筆記?筆記?筆記? 問題多多

總結

以上是生活随笔為你收集整理的基于uniapp开发的聊天界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。