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

以你之姓@ 2023-02-24 07:52 5阅读 0赞

# 快速编写一个消息列表组件 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>

运行项目效果图如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1YW5uYWkxMQ_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1YW5uYWkxMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/db1a8da280ad49f181d5fdf337349058.png