devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app实现聊天页面功能_uniapp聊天框

作者：Gausst松鼠会 | 2024-06-10 11:28:08

赞

踩

uniapp聊天框

聊天页面

  1. <template>
  2. 	<view class="contents">
  3. 		<view class="shang" style="position: fixed;top:0;width: 100vw;">
  4. 			<view class="dingbu" :style="{paddingTop:`${statusBar}px`}">
  5. 				<view @click="toBack" class="zhuce">
  6. 					<u-icon name="arrow-left" color="#fff" size="22"></u-icon>
  7. 				</view>
  8. 				<text>{{user.userBei.username}}</text>
  9. 				<view style="width: 22px;"></view>
  10. 			</view>
  11. 		</view>
  12. 		<view class="chat" :style="{paddingTop:`${42+statusBar}px`}">
  13. 			<scroll-view :style="{height: `${windowHeight-inputHeight- (statusBar*2)-84}rpx`}" id="scrollview"
  14. 				scroll-y="true" :scroll-top="scrollTop" class="scroll-view">
  15. 				<!-- 聊天主体 -->
  16. 				<view id="msglistview" class="chat-body">
  17. 					<view v-if="msgList.length">
  18. 						<!-- 聊天记录 -->
  19. 						<view class="liaotian-item" :class="item.type==2?'liaotian-item-right':''"
  20. 							v-for="(item,index) in msgList" :key="index">
  21. 							<!-- 别人发的消息 -->
  22. 							<view class="item-left" v-if="item.type==1">
  23. 								<image :src="user.userBei.image" mode=""></image>
  24. 								<view>
  25. 									<text class="content">{{item.text}}</text>
  26. 									<text class="time">{{item.time}}</text>
  27. 								</view>
  28. 							</view>
  29. 							<!-- 自己发的消息 -->
  30. 							<view class="item-right" v-if="item.type==2">
  31. 								<view>
  32. 									<text class="content">{{item.text}}</text>
  33. 									<text class="time">{{item.time}}</text>
  34. 								</view>
  35. 								<image :src="user.user.image" mode=""></image>
  36. 							</view>
  37. 						</view>
  38.  
  39. 					</view>
  40. 					<view v-else class="no-chat">
  41. 						<text class="xian"></text>
  42. 						<text
  43. 							class="wenzi">{{yuyan=='en'?'There are currently no chat records available':'暂无聊天记录'}}</text>
  44. 						<text class="xian"></text>
  45. 					</view>
  46. 				</view>
  47. 			</scroll-view>
  48. 			<!-- 底部消息发送栏 -->
  49. 			<!-- 用来占位，防止聊天消息被发送框遮挡 -->
  50. 			<view class="chat-bottom">
  51. 				<view class="send-msg" :style="{bottom:`${keyboardHeight}rpx`}">
  52. 					<view class="uni-textarea">
  53. 						<textarea v-model="chatMsg" maxlength="255" confirm-type="send" @confirm="handleSend"
  54. 							:show-confirm-bar="false" :adjust-position="false" @linechange="sendHeight" @focus="focus"
  55. 							@blur="blur"></textarea>
  56. 					</view>
  57. 					<button @click="handleSend" class="send-btn">{{yuyan=='en'?'Send':'发送'}}</button>
  58. 				</view>
  59. 			</view>
  60. 		</view>
  61.  
  62. 	</view>
  63.  
  64. </template>
  65. <script>
  66. 	import app from '../../App.vue';
  67. 	export default {
  68. 		data() {
  69. 			return {
  70. 				yuyan: "",
  71. 				statusBar: app.globalData.statusBar,
  72. 				imgUrl: app.globalData.imgUrl,
  73. 				//键盘高度
  74. 				keyboardHeight: 0,
  75. 				//底部消息发送高度
  76. 				bottomHeight: 0,
  77. 				//滚动距离
  78. 				scrollTop: 0,
  79. 				userId: '',
  80. 				//发送的消息
  81. 				chatMsg: "",
  82. 				msgList: [{
  83. 						text: '嘿！你在做什么?今天有空吗？跟我一起去兜风？',
  84. 						type: 1,
  85. 						time: "10:15"
  86. 					},
  87. 					{
  88. 						text: '听起来不错！你现在在哪里？',
  89. 						type: 2,
  90. 						time: "10:15"
  91. 					},
  92. 					{
  93. 						text: '听起来不错！',
  94. 						type: 2,
  95. 						time: "10:15"
  96. 					}
  97. 				],
  98. 				user: {},
  99. 			}
  100. 		},
  101. 		updated() {
  102. 			//页面更新时调用聊天消息定位到最底部
  103. 			this.scrollToBottom();
  104. 		},
  105. 		computed: {
  106. 			windowHeight() {
  107. 				return this.rpxTopx(uni.getSystemInfoSync().windowHeight)
  108. 			},
  109. 			// 键盘弹起来的高度+发送框高度
  110. 			inputHeight() {
  111. 				return this.bottomHeight + this.keyboardHeight
  112. 			}
  113. 		},
  114. 		filters: {
  115. 			time(time) {
  116. 				// 时间戳 
  117. 				let timeNow = new Date();
  118. 				// 获取当前时间的时间日期
  119. 				let day1 = (timeNow.getDate() < 10 ? '0' + timeNow.getDate() : timeNow.getDate());
  120.  
  121. 				let timestamp = time;
  122. 				// 此处时间戳以毫秒为单位
  123. 				let date = new Date(parseInt(timestamp) * 1000);
  124. 				let Year = date.getFullYear();
  125. 				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
  126. 				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
  127. 				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
  128. 				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
  129. 				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
  130. 				// let GMT =Year+'/' + Moth + '/' + Day+' '+ Hour + ':' + Minute + ':' + Sechond;
  131. 				if (day1 == Day) {
  132. 					return Hour + ':' + Minute
  133. 				} else {
  134. 					return Year + '/' + Moth + '/' + Day + Hour + ':' + Minute
  135. 				}
  136. 			},
  137. 		},
  138. 		onLoad(options) {
  139. 			uni.onKeyboardHeightChange(res => {
  140. 				//这里正常来讲代码直接写
  141. 				//this.keyboardHeight=this.rpxTopx(res.height)就行了 
  142. 				//但是之前界面ui设计聊天框的高度有点高,为了不让键盘和聊天输入框之间距离差太大所以我改动了一下。
  143. 				this.keyboardHeight = this.rpxTopx(res.height - 30)
  144. 				if (this.keyboardHeight < 0) this.keyboardHeight = 0;
  145. 			})
  146. 			// this.scrollToBottom()
  147. 			this.yuyan = uni.getLocale()
  148. 			this.userId = options.id
  149. 			this.getUserInfor()
  150. 		},
  151. 		onShow() {
  152. 			this.yuyan = uni.getLocale()
  153. 		},
  154. 		onUnload() {
  155. 			uni.offKeyboardHeightChange()
  156. 		},
  157. 		methods: {
  158. 			// 退回
  159. 			toBack() {
  160. 				uni.navigateBack()
  161. 			},
  162. 			focus() {
  163. 				this.scrollToBottom()
  164. 			},
  165. 			blur() {
  166. 				this.scrollToBottom()
  167. 			},
  168. 			// px转换成rpx
  169. 			rpxTopx(px) {
  170. 				let deviceWidth = uni.getSystemInfoSync().windowWidth
  171. 				let rpx = (750 / deviceWidth) * Number(px)
  172. 				return Math.floor(rpx)
  173. 			},
  174. 			// 监视聊天发送栏高度
  175. 			sendHeight() {
  176. 				setTimeout(() => {
  177. 					let query = uni.createSelectorQuery();
  178. 					query.select('.send-msg').boundingClientRect()
  179. 					query.exec(res => {
  180. 						this.bottomHeight = this.rpxTopx(res[0].height)
  181. 					})
  182. 				}, 10)
  183. 			},
  184. 			// 滚动至聊天底部
  185. 			scrollToBottom(e) {
  186. 				setTimeout(() => {
  187. 					let query = uni.createSelectorQuery().in(this);
  188. 					query.select('#scrollview').boundingClientRect();
  189. 					query.select('#msglistview').boundingClientRect();
  190. 					query.exec((res) => {
  191. 						if (res[1].height > res[0].height) {
  192. 							this.scrollTop = this.rpxTopx(res[1].height - res[0].height)
  193. 						}
  194. 					})
  195. 				}, 15)
  196. 			},
  197. 			// 发送消息
  198. 			handleSend() {
  199. 				//如果消息不为空
  200. 				if (this.chatMsg) {
  201. 					let obj = {
  202. 						text: this.chatMsg,
  203. 						type: 2,
  204. 						time: "10:15",
  205. 					}
  206. 					this.msgList.push(obj);
  207.  
  208. 					this.chatMsg = '';
  209. 					this.scrollToBottom()
  210. 				} else {
  211. 					uni.showToast({
  212. 						title: this.yuyan == 'en' ? 'Cannot send a blank message' : '不能发送空白消息',
  213. 						icon: "none"
  214. 					})
  215. 				}
  216. 			},
  217. 			// 查询两个用户信息
  218. 			getUserInfor() {
  219. 				let data = {
  220. 					uid: app.globalData.uid,
  221. 					userId: this.userId,
  222. 				}
  223. 				this.yrApi.request('User/getUserXiaoxiInfor', 'POST', data).then(res => {
  224. 					if (res.data.code == 0) {
  225. 						this.user = res.data.data
  226. 					}
  227. 				})
  228. 			},
  229. 		}
  230. 	}
  231. </script>
  232. <style lang="scss" scoped>
  233. 	view,
  234. 	button,
  235. 	text,
  236. 	input,
  237. 	textarea {
  238. 		margin: 0;
  239. 		padding: 0;
  240. 		box-sizing: border-box;
  241. 	}
  242.  
  243. 	.contents {
  244. 		min-height: 100vh;
  245. 		box-sizing: border-box;
  246. 		background-color: rgba(255, 255, 255, 1);
  247.  
  248. 		.shang {
  249. 			z-index: 1;
  250. 			background: rgba(86, 125, 244, 1);
  251. 			padding: 20rpx;
  252. 			display: flex;
  253. 			justify-content: left;
  254.  
  255. 			.dingbu {
  256. 				width: 100%;
  257. 				box-sizing: border-box;
  258. 				display: flex;
  259. 				justify-content: space-between;
  260. 				align-items: center;
  261.  
  262. 				text {
  263. 					font-size: 36rpx;
  264. 					font-weight: 500;
  265. 					line-height: 42.18rpx;
  266. 					color: rgba(255, 255, 255, 1);
  267. 					display: block;
  268. 				}
  269.  
  270. 				.zhuce {
  271. 					display: flex;
  272. 					align-items: center;
  273.  
  274. 					text {
  275. 						font-size: 36rpx;
  276. 						font-weight: 500;
  277. 						line-height: 42.18rpx;
  278. 						color: rgba(255, 255, 255, 1);
  279. 						display: block;
  280. 					}
  281. 				}
  282.  
  283. 				.zhuc {
  284. 					width: 160rpx;
  285. 					height: 80rpx;
  286. 					border-radius: 20rpx;
  287. 					border: 2rpx solid rgba(255, 255, 255, 1);
  288. 					font-size: 32rpx;
  289. 					font-weight: 700;
  290. 					line-height: 75rpx;
  291. 					text-align: center;
  292. 					color: rgba(255, 255, 255, 1);
  293. 				}
  294.  
  295. 				.yuyan {
  296. 					width: 80rpx;
  297. 					height: 80rpx;
  298. 					border-radius: 20rpx;
  299. 					background: rgba(255, 255, 255, 0.2);
  300. 					display: flex;
  301. 					align-items: center;
  302. 					justify-content: center;
  303. 					box-sizing: border-box;
  304.  
  305. 					text {
  306. 						color: #fff;
  307. 					}
  308.  
  309. 					.qiu {
  310. 						width: 40rpx;
  311. 						height: 40rpx;
  312. 					}
  313.  
  314. 					text {
  315. 						font-size: 32rpx;
  316. 						font-weight: 700;
  317. 						line-height: 75rpx;
  318. 						text-align: center;
  319. 						color: rgba(255, 255, 255, 1);
  320. 					}
  321. 				}
  322. 			}
  323. 		}
  324.  
  325. 		/* 聊天消息 */
  326. 		.chat {
  327. 			.scroll-view {
  328. 				::-webkit-scrollbar {
  329. 					display: none;
  330. 					width: 0 !important;
  331. 					height: 0 !important;
  332. 					-webkit-appearance: none;
  333. 					background: transparent;
  334. 					color: transparent;
  335. 				}
  336.  
  337. 				.chat-body {
  338. 					padding: 24rpx;
  339. 					box-sizing: border-box;
  340.  
  341. 					.liaotian-item {
  342. 						margin-top: 16px;
  343. 						display: flex;
  344. 						align-items: flex-start;
  345.  
  346. 						.item-left {
  347. 							display: flex;
  348. 							align-items: flex-start;
  349. 							width: 80%;
  350.  
  351. 							image {
  352. 								width: 34px;
  353. 								height: 34px;
  354. 								border-radius: 50%;
  355. 								flex-shrink: 0;
  356. 								margin-right: 10px;
  357. 							}
  358.  
  359. 							.content {
  360. 								display: block;
  361. 								padding: 12px 14px;
  362. 								border-radius: 0px 15px 15px 15px;
  363. 								background: rgba(255, 255, 255, 1);
  364. 								box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
  365. 								font-size: 14px;
  366. 								font-weight: 500;
  367. 								line-height: 20px;
  368. 								color: rgba(51, 51, 51, 1);
  369. 							}
  370.  
  371. 							.time {
  372. 								display: block;
  373. 								font-size: 12px;
  374. 								font-weight: 400;
  375. 								line-height: 16px;
  376. 								color: rgba(117, 129, 143, 1);
  377. 								margin-top: 10rpx;
  378. 							}
  379. 						}
  380.  
  381. 						.item-right {
  382. 							display: flex;
  383. 							align-items: flex-start;
  384. 							justify-content: flex-end;
  385. 							width: 80%;
  386.  
  387. 							image {
  388. 								width: 34px;
  389. 								height: 34px;
  390. 								border-radius: 50%;
  391. 								flex-shrink: 0;
  392. 								margin-left: 10px;
  393. 							}
  394.  
  395. 							.content {
  396. 								display: block;
  397. 								padding: 12px 14px;
  398. 								border-radius: 15px 0px 15px 15px;
  399. 								background: rgba(86, 125, 244, 1);
  400. 								box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
  401. 								font-size: 14px;
  402. 								font-weight: 500;
  403. 								line-height: 20px;
  404. 								color: rgba(255, 255, 255, 1);
  405. 							}
  406.  
  407. 							.time {
  408. 								display: block;
  409. 								font-size: 12px;
  410. 								font-weight: 400;
  411. 								line-height: 16px;
  412. 								color: rgba(117, 129, 143, 1);
  413. 								margin-top: 10rpx;
  414. 								text-align: right;
  415. 							}
  416. 						}
  417.  
  418. 					}
  419.  
  420. 					.liaotian-item-right {
  421. 						justify-content: flex-end;
  422. 					}
  423.  
  424. 				}
  425.  
  426. 				.no-chat {
  427. 					display: flex;
  428. 					align-items: center;
  429. 					margin-top: 20rpx;
  430.  
  431. 					.wenzi {
  432. 						display: block;
  433. 						flex-shrink: 0;
  434. 						font-size: 14px;
  435. 						font-weight: 500;
  436. 						line-height: 22px;
  437. 						color: rgba(153, 153, 153, 1);
  438. 						margin: 0 20rpx;
  439. 					}
  440.  
  441. 					.xian {
  442. 						display: block;
  443. 						width: 100%;
  444. 						border-bottom: 1rpx solid rgba(153, 153, 153, 1);
  445. 					}
  446. 				}
  447. 			}
  448.  
  449. 			/* 底部聊天发送栏 */
  450. 			.chat-bottom {
  451. 				width: 100%;
  452. 				background: rgba(245, 245, 245, 1);
  453. 				transition: all 0.1s ease;
  454. 				// padding-bottom:calc(env(safe-area-inset-bottom));
  455.  
  456. 				.send-msg {
  457. 					display: flex;
  458. 					align-items: center;
  459. 					padding: 16rpx 30rpx;
  460. 					padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  461. 					position: fixed;
  462. 					bottom: 0;
  463. 					width: 100vw;
  464. 					transition: all 0.1s ease;
  465. 					box-sizing: border-box;
  466. 					background-color: rgba(245, 245, 245, 1);
  467. 				}
  468.  
  469. 				.uni-textarea {
  470. 					textarea {
  471. 						width: calc(100vw - 208rpx);
  472. 						background: #FFFFFF;
  473. 						border-radius: 10rpx;
  474. 						font-size: 32rpx;
  475. 						color: #333333;
  476. 						line-height: 55rpx;
  477. 						padding: 10rpx;
  478. 						height: 75rpx;
  479. 						box-sizing: border-box;
  480. 					}
  481. 				}
  482.  
  483. 				.send-btn {
  484. 					display: flex;
  485. 					align-items: center;
  486. 					justify-content: center;
  487. 					margin-left: 20rpx;
  488. 					width: 128rpx;
  489. 					height: 75rpx;
  490. 					background: #4F7DF5;
  491. 					border-radius: 8rpx;
  492. 					font-size: 28rpx;
  493. 					font-family: PingFang SC;
  494. 					font-weight: 500;
  495. 					color: #FFFFFF;
  496. 					line-height: 28rpx;
  497. 					flex-shrink: 0;
  498. 				}
  499. 			}
  500. 		}
  501.  
  502. 	}
  503. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/698561
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号