uni-app 4.6开发聊天列表组件(二)

简介: uni-app 4.6开发聊天列表组件(二)


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">
      <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>

这是做好的样式

其中有一个格式化时间的js文件,接下来我会专门用一篇文章来叙述。今天就到这里了,谢谢观看

目录
相关文章
|
24天前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
78 3
|
26天前
|
Android开发 开发者 UED
个人开发 App 成功上架手机应用市场的关键步骤
个人开发 App 成功上架手机应用市场的关键步骤
|
26天前
|
开发工具 数据安全/隐私保护 Android开发
【教程】APP 开发后如何上架?
【教程】APP 开发后如何上架?
|
24天前
|
Java Android开发 开发者
【Uniapp开发】APP的真机调试指南,从开发到上架全过程
【Uniapp开发】APP的真机调试指南,从开发到上架全过程
34 3
游戏直播APP平台开发多少钱成本:定制与成品源码差距这么大
开发一款游戏直播APP平台所需的费用是多少?对于计划投身这一领域的投资者来说,首要关心的问题之一就是。本文将探讨两种主要的开发模式——定制开发与成品源码二次开发的成本差异及其优劣势。
app开发的一些思路
<p><br></p> <p><br></p> <p></p> <h3 style="margin:0px; padding:0px; border:0px; vertical-align:baseline; clear:both; font-weight:normal; list-style:none; color:rgb(102,102,102); font-family:宋体;
2863 0
x3d
小型app开发的思路
前提: 1. 性能不是最重要; 2. 人手少; 3. 速度要快;   结论: 1. 混合式 2. 减少app的复杂程度 3. 追求性能   (博客,尽量让自己每天写一点,短一点都可以)
x3d
537 0
|
1月前
|
API
uni-app 146朋友圈列表api开发
uni-app 146朋友圈列表api开发
18 0
|
29天前
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架(四十六):【移动开发】整合uni-app搭建移动端快速开发框架-环境搭建
正如优秀的软件设计一样,uni-app把一些移动端常用的功能做成了独立的服务或者插件,我们在使用的时候只需要选择使用即可。但是在使用这些服务或者插件时一定要区分其提供的各种服务和插件的使用场景,例如其提供的【uni-starter快速开发项目模版】几乎集成了移动端所需的所有基础功能,使用非常方便,但是其许可协议只允许对接其uniCloud的JS开发服务端,不允许对接自己的php、java等其他后台系统。
135 2
|
1月前
|
移动开发 负载均衡 小程序
代驾app开发丨代驾系统开发玩法详情丨代驾系统开发网页版/H5/小程序及源码部署
**司机/代驾员端**:司机可以通过APP接收订单,查看订单详情、路线和导航,提供现场服务并进行确认。