快速编写一个消息列表组件 uniapp篇

快速编写一个消息列表组件 uniapp篇

• 首先创建一个消息列表页面 msg,vue
  • 编写好页面样式

<template>
	<view>
		<template v-if="list.length >0 ">
		<block v-for="(item,index) in list" :key="index">
			<msg-list :item="item" :index="index"></msg-list>
		</block>
		</template>
		<template v-else>
			<no-thing></no-thing>
		</template>
	</view>
</template>

<script>
	import noThing from '../../components/common/no-thing.vue';
	import msgList from '@/components/msg/msg-list.vue';
	const demo=[{
					avatar:"../../static/imgs/ali_pay.png",
					username:"昵称",
					update_time:"1594187992",
					data:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
					noread:20
				},
				{
					avatar:"../../static/imgs/ali_pay.png",
					username:"昵称",
					update_time:"1594187992",
					data:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
					noread:20
				},
				{
					avatar:"../../static/imgs/ali_pay.png",
					username:"昵称",
					update_time:"1594187992",
					data:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
					noread:20
				}];
	export default {
		components:{
			msgList,
			noThing
		},
		data() {
			return {
				list:[]
			}
		},
		//监听下拉刷新
		onPullDownRefresh() {
			this.refresh()
		},
		methods: {
			//下拉刷新
			refresh(){
				setTimeout(()=>{
					this.list = demo
					//停止下拉刷新
					uni.stopPullDownRefresh();
				},2000)
			}
		}
	}
</script>

<style>

</style>

新建组件 msg-list.vue

 <template>
 <!-- 消息列表 -->
 
 <view class="flex align-center p-2 border-bottom border-light-secondary" hover-class="bg-light">
 	<image :src="item.avatar" class="rounded-circle mr-2" style="height: 80rpx;width: 80rpx;" mode=""></image>
 	<view class="flex flex-column flex-1 ">
 		<view class="flex align-center justify-between">
 			<text class="font-md">{{item.username}}</text>
 			<text class="font-sm text-secondary">{{item.update_time|formatTime}}</text>
 		</view>
 		<view class="flex align-center justify-between">
 			<text class="text-secondary text-ellipsis" style="max-width: 500rpx;">{{item.data}}</text>
 			<uni-badge :text="item.noread" type="error"></uni-badge>
 		</view>
 		
 	</view>
 </view>
</template>
<script>
 import uniBadge from '../uni-ui/uni-badge/uni-badge.vue';
 import $T from '../../common/time.js';
 export default{
 	components:{
 		uniBadge
 		
 	},
 	props:{
 		item:Object,
 		index:Number
 	},
 	//过滤器
 	filters:{
 		formatTime(value){
 			return $T.gettime(value);
 		}
 	},
 }
</script>

<style>
</style>

运行项目效果图如下