国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

uniapp:聊天消息列表（好友列表+私人單聊）支持App、H5、小程序

1年前作者：江城開朗的豌豆分類：Toy博客閱讀(15)違法舉報

這篇具有很好參考價值的文章主要介紹了uniapp:聊天消息列表（好友列表+私人單聊）支持App、H5、小程序。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

??

uniapp:聊天消息列表（好友列表+私人單聊）支持App、H5、小程序,uniapp,vue2,前端,uni-app,小程序,通訊,聊天,消息列表,對話

??

???江城開朗的豌豆：個人主頁

????個人專欄?:《 VUE 》?《 javaScript 》

????個人網(wǎng)站?:《江城開朗的豌豆?? 》?

???生活的理想，就是為了理想的生活?!

uniapp:聊天消息列表（好友列表+私人單聊）支持App、H5、小程序,uniapp,vue2,前端,uni-app,小程序,通訊,聊天,消息列表,對話

目錄

??? 文章簡介（效果圖展示）????????

? ???插件傳送門：聊天消息列表

???? 文章背景

?????平臺兼容性

???? 功能實現(xiàn)

廢話不說直接上代碼

????用戶列表完整代碼

????單人對話框?完整代碼?

???文章總結(jié)

???隱私、權(quán)限聲明

1. 本插件需要申請的系統(tǒng)權(quán)限列表：

2. 本插件采集的數(shù)據(jù)、發(fā)送的服務(wù)器地址、以及數(shù)據(jù)用途說明：

3. 本插件是否包含廣告，如包含需詳細說明廣告表達方式、展示頻率：

??? 文章簡介（效果圖展示）

??????在現(xiàn)代社交互動中，聊天消息列表是應(yīng)用程序中的關(guān)鍵組成部分。它不僅僅是一種通信工具，更是人們?nèi)粘Ｉ钪羞B接感情、分享信息的重要方式之一。隨著移動互聯(lián)網(wǎng)的發(fā)展，用戶在不同平臺上（如App、H5、小程序等）進行聊天的需求也愈發(fā)增加。因此，設(shè)計并實現(xiàn)一個支持多平臺、多種形式的聊天消息列表成為了開發(fā)者們的挑戰(zhàn)之一。

????????

? ? ???插件傳送門：聊天消息列表

uniapp:聊天消息列表（好友列表+私人單聊）支持App、H5、小程序,uniapp,vue2,前端,uni-app,小程序,通訊,聊天,消息列表,對話

???? 文章背景

????????

? ? ? ?最近我專注于優(yōu)化我們聊天消息列表的交互體驗。現(xiàn)在，我們的消息列表頁面上有多個標簽，每個標簽對應(yīng)著不同的聊天會話。當(dāng)用戶點擊某個標簽時，頁面會流暢地滾動到相應(yīng)的聊天記錄位置，這樣用戶就可以更方便地查看他們感興趣的對話內(nèi)容。

? ? ? 今天下午，我花了些時間在消息列表的交互功能上進行調(diào)整和改進。經(jīng)過一番努力，我成功地實現(xiàn)了這一功能！在這個過程中，我逐步解決了各種技術(shù)挑戰(zhàn)，體驗著一個個問題被一一擊破的成就感。這種改進用戶體驗的過程真是讓人感到無比滿足！

?????平臺兼容性

Vue2	Vue3
√	√

App	快應(yīng)用	微信小程序	支付寶小程序	百度小程序	字節(jié)小程序	QQ小程序
HBuilderX 3.6.11 app-vue app-nvue	√	√	√	√	√	√

釘釘小程序	快手小程序	飛書小程序	京東小程序
√	√	√	√

H5-Safari	Android Browser	微信瀏覽器(Android)	QQ瀏覽器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

???? 功能實現(xiàn)

廢話不說直接上代碼

????用戶列表完整代碼

uniapp:聊天消息列表（好友列表+私人單聊）支持App、H5、小程序,uniapp,vue2,前端,uni-app,小程序,通訊,聊天,消息列表,對話

<template>
	<view class="page">
		<view class="list-item" v-for="(item,index) in users" :key="index" @click="connect(item)">
			<view class="avatar">
				<text class="round" v-if="item.read"></text>
				<image :src="item.avatar" mode="widthFix"></image>
			</view>
			<view class="content">
				<view class="title">
					<text class="name">{{ item.name }}</text>
					<text class="time">{{ item.time }}</text>
				</view>
				<view class="txt">{{ item.msg }}</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				}, {
					text: '確認',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				users: [{
						avatar: '/static/avatar/avatar1.png',
						name: '楊濤',
						read: 1,
						time: '23:59',
						msg: '沒有消息就是最好的消息'
					},
					{
						avatar: '/static/avatar/avatar2.jpg',
						name: '雨中漫步',
						read: 1,
						time: '23:59',
						msg: '沒有消息就是最好的消息'
					},
					{
						avatar: '/static/avatar/avatar3.jpeg',
						name: '糖果夢境',
						read: 1,
						time: '23:59',
						msg: '沒有消息就是最好的消息'
					},
					{
						avatar: '/static/avatar/avatar4.png',
						name: '海上日落',
						read: 1,
						time: '23:59',
						msg: '沒有消息就是最好的消息'
					},
					{
						avatar: '/static/avatar/avatar6.png',
						name: '男朋友',
						read: 1,
						time: '23:59',
						msg: '沒有消息就是最好的消息'
					},
					{
						avatar: '/static/avatar/avatar8.png',
						name: '女朋友',
						read: 1,
						time: '23:59',
						msg: '沒有消息就是最好的消息'
					},
					{
						avatar: '/static/avatar/avatar5.jpeg',
						name: '靜謐之夜',
						read: 1,
						time: '23:59',
						msg: '沒有消息就是最好的消息'
					},
					{
						avatar: '/static/avatar/avatar1.png',
						name: '風(fēng)吹麥浪',
						read: 0,
						time: '23:59',
						msg: '沒有消息就是最好的消息'
					},
					{
						avatar: '/static/avatar/avatar1.png',
						name: '路過歲月',
						read: 0,
						time: '23:59',
						msg: '沒有消息就是最好的消息'
					},
					{
						avatar: '/static/avatar/avatar1.png',
						name: '繁星點點',
						read: 0,
						time: '23:59',
						msg: '沒有消息就是最好的消息'
					}
				]
			};
		},
		methods: {
			onClick(e) {
				console.log('點擊了' + (e.position === 'left' ? '左側(cè)' : '右側(cè)') + e.content.text + '按鈕')
			},
			swipeChange(e, index) {
				console.log('當(dāng)前狀態(tài)：' + e + '，下標：' + index)
			},
			connect(item) {
				uni.navigateTo({
					url: `/pages/message/message?name=${item.name}&avatar=${item.avatar}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 32rpx;
		color: #333;
	}

	.list-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #ccced3;

		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			position: relative;

			.round {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background: #ef5656;
				top: -4rpx;
				right: -4rpx;
				z-index: 1;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.content {
			flex: 1;

			.title {
				display: flex;
				justify-content: space-between;

				.name {
					font-weight: bold;
				}

				.time {
					color: #999;
					font-size: 24rpx;
				}
			}

			.txt {
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				text-align: left;
				color: #999;
				font-size: 26rpx;
			}
		}
	}
</style>

????單人對話框?完整代碼

uniapp:聊天消息列表（好友列表+私人單聊）支持App、H5、小程序,uniapp,vue2,前端,uni-app,小程序,通訊,聊天,消息列表,對話

<template>
	<view class="page">
		<scroll-view class="scroll-view" scroll-y scroll-with-animation :scroll-top="top">
			<view style="padding: 30rpx 30rpx 240rpx;">
				<view class="message" :class="[item.userType]" v-for="(item,index) in list" :key="index">
					<image :src="item.avatar" v-if="item.userType === 'friend'" class="avatar" mode="widthFix"></image>
					<view class="content" v-if="item.messageType === 'image'">
						<image :src="item.content" mode="widthFix"></image>
					</view>
					<view class="content" v-else>
						{{ item.content }}
					</view>
					<image :src="item.avatar" v-if="item.userType === 'self'" class="avatar" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
		<view class="tool">
			<input type="text" v-model="content" class="input" @confirm="send" />
			<image src="/static/photo.png" mode="widthFix" class="thumb" @click="chooseImage"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				list: [],
				top: 0
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.name
			})
			this._friendAvatar = options.avatar
			this._selfAvatar = '/static/avatar/avatar5.jpeg'
			this.list = [
				{
					content: '對方歷史回復(fù)消息',
					userType: 'friend',
					avatar: this._friendAvatar
				},
				{
					content: '歷史消息',
					userType: 'self',
					avatar: this._selfAvatar
				}
			]
		},
		methods: {
			send() {
				this.list.push({
					content: this.content,
					userType: 'self',
					avatar: this._selfAvatar
				})
				this.content = ''
				this.scrollToBottom()
				// 模擬對方回復(fù)
				setTimeout(()=>{
					this.list.push({
						content: '周末什么安排',
						userType: 'friend',
						avatar: this._friendAvatar
					})
					this.scrollToBottom()
				}, 1500)
			},
			chooseImage() {
				uni.chooseImage({
					// sourceType: 'album',
					success: (res) => {
						this.list.push({
							content: res.tempFilePaths[0],
							userType: 'self',
							messageType: 'image',
							avatar: this._selfAvatar
						})
						this.scrollToBottom()
						// 模擬對方回復(fù)
						setTimeout(()=>{
							this.list.push({
								content: '你好呀，朋友~',
								userType: 'friend',
								avatar: this._friendAvatar
							})
							this.scrollToBottom()
						}, 1500)
					}
				})
			},
			scrollToBottom() {
				this.top = this.list.length * 1000
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		background: #eee;
		box-sizing: border-box;
	}
	.message {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
		
		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}
		.content {
			min-height: 80rpx;
			max-width: 60vw;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 1.3;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #fff;
			image {
				width: 200rpx;
			}
		}
		&.self {
			justify-content: flex-end;
			.avatar {
				margin: 0 0 0 30rpx;
			}
			.content {
				position: relative;
				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-left: 16rpx solid #fff;
					right: -28rpx;
					top: 24rpx;
				}
			}
		}
		&.friend {
			.content {
				position: relative;
				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-right: 16rpx solid #fff;
					left: -28rpx;
					top: 24rpx;
				}
			}
		}
	}

	.tool {
		position: fixed;
		width: 100%;
		min-height: 120rpx;
		left: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 20rpx 24rpx 20rpx 40rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)/2) !important;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)/2) !important;
		.input {
			background: #eee;
			border-radius: 10rpx;
			height: 70rpx;
			margin-right: 30rpx;
			flex: 1;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}
		.thumb {
			width: 64rpx;
		}
	}
</style>

?

???文章總結(jié)

???隱私、權(quán)限聲明

?? ? ? ? 如說明表達還不夠清楚，不清楚怎么使用可導(dǎo)入完整示例項目運行體驗和希望對大家有幫助！

1. 本插件需要申請的系統(tǒng)權(quán)限列表：

無，開箱即用

2. 本插件采集的數(shù)據(jù)、發(fā)送的服務(wù)器地址、以及數(shù)據(jù)用途說明：

插件不采集任何數(shù)據(jù)

3. 本插件是否包含廣告，如包含需詳細說明廣告表達方式、展示頻率：

沒有任何廣告，純分享，方便自己，同時也方便其他能用的的前端好朋友

請大家不吝賜教,在下方評論或者私信我,十分感謝??????.

使用插件有任何問題歡迎加入QQ討論群：

作者QQ群：906392632（未滿）

? 認為我某個部分的設(shè)計過于繁瑣,有更加簡單或者更高逼格的封裝方式

? 認為我部分代碼過于老舊,可以提供新的API或最新語法

? 對于文章中部分內(nèi)容不理解

? 解答我文章中一些疑問

? 認為某些交互,功能需要優(yōu)化,發(fā)現(xiàn)BUG

? 想要添加新功能,對于整體的設(shè)計,外觀有更好的建議

最后感謝各位的耐心觀看，既然都到這了，點個 ??贊再走吧！

uniapp:聊天消息列表（好友列表+私人單聊）支持App、H5、小程序,uniapp,vue2,前端,uni-app,小程序,通訊,聊天,消息列表,對話文章來源地址http://www.zghlxwxcb.cn/news/detail-851802.html

到了這里，關(guān)于uniapp:聊天消息列表（好友列表+私人單聊）支持App、H5、小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

uniapp 使用組件 uni-list 實現(xiàn)聊天列表功能
如何使用 uniapp 的組件實現(xiàn)聊天列表的功能呢，翻閱了半天文檔，終于找到一個實用的方法，下面是具體的步驟 ?1、首先需要下載對應(yīng)的插件去uniapp的官方文檔進行下載（uni-ui - DCloud 插件市場），這里直接下載插件并導(dǎo)入到HBuilderx 中就可以了。 ?2、接下來就可以直接進行使
2024年02月09日
瀏覽(48)
釘釘企業(yè)機器人單聊消息發(fā)送實踐-大數(shù)據(jù)平臺(XSailboat)消息中心消息推送
在筆者開發(fā)的大數(shù)據(jù)平臺XSailboat 中有消息中心模塊，用來全平臺的消息收集，整理分拆、訂閱發(fā)送等功能。消息推送方式支持釘釘群聊、釘釘單聊、短信通知?，F(xiàn)記錄一下企業(yè)機器人消息單聊推送的實現(xiàn)過程。這是官方的開發(fā)文檔地址：《機器人發(fā)送、查詢和撤回單聊消
2024年01月25日
瀏覽(21)
關(guān)于uniapp開發(fā)微信小程序，實現(xiàn)聊天消息，最新消息最底部展示
關(guān)于uniapp開發(fā)微信小程序，實現(xiàn)聊天消息最新消息最底部展示 uniappvue 此處我覺得最要注意的點就是看是誰產(chǎn)生的滾動條。： scrollTop,scrollHeight 最終效果展示錄制的聊天功能
2024年02月09日
瀏覽(25)
【uni-app】UniApp實現(xiàn)微信小程序中撥打手機電話和長按加微信客服好友（完整代碼示例）
UniApp實現(xiàn)微信小程序中撥打手機電話和長按加微信客服好友（完整代碼示例）
2024年02月11日
瀏覽(98)
uniapp集成騰訊即時通信IM，實現(xiàn)一對一聊天，支持文字、表情、語音、圖片、視頻
原則介紹效果圖 uniapp集成騰訊即時通信IM，實現(xiàn)一對一聊天，支持文字、使用方式將文件放到相應(yīng)的位置 app配置 main.js 配置 pages.json 配置 GenerateTestUserSig.js配置SDKAPPID和SECRETKEY 安裝 npm i 運行下載源碼聯(lián)系方式查看文章
2024年02月09日
瀏覽(23)
uniapp 打包H5，打包小程序，打包app分享到微信聊天、朋友圈
1.uniapp打包H5操作手法：Hbuilder-發(fā)行-網(wǎng)站-PC-WEB端或手機端H5訪問，需要填寫個訪問域名，即發(fā)布后訪問的域名路徑 2.uniapp打包H5配置注意事項：uniapp下manifest.json文件中H5配置相關(guān)配置，路由模式選擇hash,勾選上https訪問。注：如果是本地訪問沒有https設(shè)置，則該項不要勾選，打
2024年02月09日
瀏覽(88)
在線客服系統(tǒng)源碼/在線對話聊天/多商戶在線客服系統(tǒng)源碼(可機器人自動聊天/支持app公眾號網(wǎng)頁H5)
源碼介紹在線客服系統(tǒng)源碼/在線對話聊天/多商戶在線客服系統(tǒng)源碼，它是一款基于Web的在線客服系統(tǒng)，適用于實現(xiàn)企業(yè)與客戶之間的在線溝通以及咨詢服務(wù)。該系統(tǒng)支持多商戶、無限座席，可以為多個企業(yè)提供在線客服服務(wù)，不受座席數(shù)量的限制，用得起更方便了。這個系
2024年02月04日
瀏覽(25)
uniapp - [微信小程序] 詳細動態(tài)設(shè)置分享轉(zhuǎn)發(fā)時的參數(shù)，實現(xiàn)點擊按鈕元素后 “手動觸發(fā)“ 動態(tài)設(shè)置參數(shù)并調(diào)起轉(zhuǎn)發(fā)分享給好友（列表上每一個分享按鈕，單獨設(shè)置分享轉(zhuǎn)發(fā)參數(shù)，每次都是不同的分享參數(shù)）
網(wǎng)上都是直接寫死（默認不變）的分享參數(shù)，有時候需要動態(tài)賦值分享的標題、圖片等，本文，這時候就不行了。【如果需要原生微信小程序的教程，請訪問：這篇文章】本文實現(xiàn)了在 uniapp 微信小程序端開發(fā)中，動態(tài)設(shè)置分享的參數(shù)（并與右上角膠囊點擊的分享共存，互
2024年02月14日
瀏覽(166)
uniapp即時通訊源碼/im聊天系統(tǒng)源碼開源（app+h5+小程序+pc四端）
IM即時通訊源碼是現(xiàn)今互聯(lián)網(wǎng)行業(yè)中成熟、穩(wěn)定和高效的即時通訊解決方案之一，其源碼可以提供給開發(fā)者進行二次開發(fā)和定制化，實現(xiàn)更加個性化的即時通訊功能。本文將圍繞IM即時通訊源碼進行深入探討，包括其優(yōu)勢、應(yīng)用場景以及二次開發(fā)和定制化等方面的內(nèi)容。源碼
2024年02月04日
瀏覽(23)
前端基于uniapp[uniPush]實現(xiàn)APP消息推送（安卓、IOS）
前提概述：此文章都是基于uniapp中uniPush2實現(xiàn)的在線、離線推送登錄開發(fā)者中心先填寫好項目信息以及配置廠商在manifest.json文件中勾選推送模塊打包自定義基座在前端項目中創(chuàng)建云函數(shù)（此云函數(shù)的作用是接受后臺發(fā)送的消息模板，解析出來后，發(fā)送給到uniapp后臺，以此觸
2024年02月09日
瀏覽(47)

<fieldset id="8cab5"><ruby id="8cab5"><tbody id="8cab5"></tbody></ruby></fieldset>

<strong id="8cab5"><center id="8cab5"></center></strong>