unicloud22-小案例8 插件市场使用uni-ui格式化日期和图标

新手一号
121 阅读3分钟

优化首页的细节

下载插件不要按官方的流程直接在插件市场安装到编辑器，这样包会很大，可以在uniapp官网组件--扩展组件（uni-ui）中查看具体使用方法

使用uni-icons图标

在文档中，有安装的链接，在这里安装就只会安装这个功能，不会把整个uni-ui包都安装下来，点击后，他还是跳转到插件市场，但是就是一个单独的图标功能 image.png

image.png

安装好之后，插件包在项目的uni-modules文件夹中

第一个和第三个模块是原本项目创建时就有的 image.png

不想要的模块可以在编辑器中的工具--插件安装中卸载

使用

复制官方例程测试，直接将这个组件写到首页的view根标签内

<uni-icons type="contact" size="30"></uni-icons>

type就是官方提供的图标名称，点一下图标就复制好了，在编辑器中粘贴就行 image.png

在首页测试

图标成功在首页显示了 image.png

官方提供的图标还是很少，还是需要使用iconfont

之前的添加新闻功能是直接写的一个+号，把+号替换成字体图标组件,字体图标组件直接包裹在原本的view组件中

    <!-- 跳转到新增页面 -->
    <view class="goAdd" @click="goAdd">
      <uni-icons type="compose" size="30"></uni-icons>
    </view>

原本的+号就变成编辑图标了 image.png

图标有一个color属性，值是字符串类型

    <!-- 跳转到新增页面 -->
    <view class="goAdd" @click="goAdd">
      <uni-icons type="compose" size="30" color="#fff"></uni-icons>
    </view>

给他改成白色 image.png

日期格式化

把之前的时间戳改成正确的时间格式

还是在文档中找到日期格式化组件，然后进入插件市场安装 之前的时间只是一个时间戳，从云数据库获取数据后直接写在view标签里显示的

<view class="info">
  <text>{{item.author}}</text>
  <text>{{item.posttime}}</text>
  <text>删除</text>
</view>

把官方示例复制过来，直接粘贴到text标签中替换之前的插值表达式

<text><uni-dateformat date="2020/10/20 20:20:20"></uni-dateformat></text>

date属性里还可以写变量 <uni-dateformat :date="Date.now()"></uni-dateformat>

现在还没有动态插入时间，但是写死的时间已经渲染到页面了 image.png

把存储在云数据库的时间戳写到date里，通过vi-bind绑定

<text><uni-dateformat :date="item.posttime"></uni-dateformat></text>

编辑时间成功渲染出来了 image.png

现在的时间格式太长了，可以只写月和日，月日的mm和dd之间的符号可以自定义，不一定非要是反斜杠，

还可以用threshold属性将具体的时间转化成文字描述

属性名类型默认值说明
dateObject|String|NumberDate.now()要格式化的日期对象/日期字符串/时间戳
thresholdArray[0, 0]转化类型阈值
formatString'yyyy/MM/dd hh:mm:ss'格式字符串
localeStringzh格式化使用的语言，目前支持zh（中文）、en（英文）

通过threshold属性转化时间为天 threshold范围是1分钟-60分钟

threshold属性的文档说明：

格式化组件会对时间进行用户友好转化，threshold就是用来控制转化的时间阈值的。

以[60000, 3600000]为例，将传入时间与当前时间差的绝对值记为delta（单位毫秒）

  • delta < 60000时，时间会被转化为“刚刚|马上”
  • delta >= 60000 && delta < 3600000时，时间会被转化为“xx分钟前|xx分钟后”，如果超过1小时会显示成“xx小时前|xx小时后”，以此类推
  • delta >= 3600000时，会按照format参数传入的格式进行格式化

如果不想转化为“马上|刚刚”可以传入:threshold = "[0,3600000]"。默认值[0,0]既不会转换为“马上|刚刚”也不会转化为“xx分钟前|xx分钟后”

类似这样。如果超出了设置的时间范围，就还是按正常设置的时间格式显示 image.png

测试：

<view class="info">
  <text>{{item.author}}</text>
  <text>
    <uni-dateformat 
    :date="item.posttime" 
    :threshold="[60000, 3600000]"
    format="MM-dd"
    ></uni-dateformat>
    </text>
</view>

现在的时间就不是具体的年月日时分秒了，而是文字描述，对用户更友好

image.png

avatar
文章
阅读
粉丝