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

聊天组件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);
      }
    },
    onl oad() {
      
    },
    methods: {

    }
  }
</script>

<style>

</style>