uni-app 4.6开发聊天列表组件（二）

<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">
      <view class="flex align-center">
        <view class="flex align-center justify-center" style="width: 145rpx;">
          <image :src="item.avatar" mode="widthFix" style="width: 92rpx;height: 92rpx;" class="rounded"></image>
        </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>
      </view>
    </block>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import $Time from "@/common/free-lib/time.js";
  export default {
    components: {
      freeNavBar
    },
    data() {
      return {
        list:[
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈"
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈"
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈"
          },
          {
            avatar:"/static/images/demo/demo6.jpg",
            nickname:"昵称",
            update_time:1628069958,
            data:"你好啊，哈哈哈"
          }
        ]
      }
    },
    filters:{
      formateTime(value){
        return $Time.gettime(value);
      }
    },
    onLoad() {
      
    },
    methods: {
    }
  }
</script>
<style>
</style>