赞
踩
<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>
运行项目效果图如下
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。