uni-app 4.10封装聊天列表组件

最新推荐文章于 2024-08-11 18:09:16 发布

2019ab

最新推荐文章于 2024-08-11 18:09:16 发布

阅读量293

点赞数

分类专栏： uni-app

本文链接：https://blog.csdn.net/ab15176142633/article/details/119410111

版权

uni-app 专栏收录该内容

162 篇文章 15 订阅

订阅专栏

本文通过一个具体的例子展示了如何使用Vue组件`free-media-list.vue`来渲染列表。组件中包含了用户头像、昵称、更新时间和消息内容，同时支持长按和点击事件。在父组件`index.nvue`中，利用`v-for`指令遍历数据并展示列表，每个列表项都带有未读消息的角标。此外，文章还涉及到了时间格式化过滤器的使用。

摘要由CSDN通过智能技术生成

聊天组件free-media-list.vue,如下代码

<template>
	<view hover-class="bg-light">
		<div class="flex align-stretch">
			<view class=" flex align-center justify-center position-relative" style="width: 145rpx;" @click="onClick" @longpress="long">
				<free-avatar :src="item.avatar" size="92"></free-avatar>
				<!-- 角标 -->
				<free-badge badgeClass="position-absolute" bageStyle="top:15rpx;right:15rpx;" :num="item.noreadnum" v-if="item.noreadnum>0"></free-badge>
			</view>
			<view class="flex flex-column border-bottom flex-1 py-3 pr-3 border-light-secondary">
				<view class="flex align-center justify-between mb-1">
					<text class="font-md">{{item.nickname}}</text>
					<text class="font-sm text-light-muted">{{item.update_time|formateTime}}</text>
				</view>
				<text class="font text-ellipsis text-light-muted">{{item.data}}</text>
			</view>
		</div>
	</view>
</template>

<script>
	import freeAvatar from './free-avatar.vue';
	import $Time from "@/common/free-lib/time.js";
	import freeBadge from "./free-badge.vue";
	
	export default{
		components:{
			freeAvatar,
			freeBadge
		},
		props:{
			item:Object,
			index:Number,
		},
		methods:{
			long(e){
				console.log(e)
			},
			onClick(){
				this.$emit('click');
			}
		}
	}
</script>

<style>
</style>

index.nvue引入

<template>
	<view class="">
		<free-nav-bar :title="'微信（100）'" :fixed='true'>
			<template v-slot="title"></template>
		</free-nav-bar>
		
		<!-- 列表 --> 
		<block v-for="(item,index) in list" :key="index">
			<free-media-list :item="item" :index="index"></free-media-list>
		</block>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeMediaList from '@/components/free-ui/free-media-list.vue';
	export default {
		components: {
			freeNavBar,
			freeMediaList
		},
		data() {
			return {
				list:[
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:1
					},
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:12
					},
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:2
					},
					{
						avatar:"/static/images/demo/demo6.jpg",
						nickname:"昵称",
						update_time:1628069958,
						data:"你好啊，哈哈哈",
						noreadnum:10
					}
				]
			}
		},
		filters:{
			formateTime(value){
				return $Time.gettime(value);
			}
		},
		onLoad() {
			
		},
		methods: {

		}
	}
</script>

<style>

</style>