uni-app项目实战笔记4--使用组件具名插槽slot定义公共标题模块

先来看效果：

如图，“每日推荐”，“专题精选”这些公共标题有相同的地方，也有自己的独特的地方，像这类有共性又有个性的可考虑使用slot插槽来实现。

实现步骤：

1.在前面文章创建的公共组件common-title定义具名插槽方便调用:

<view class="common-title"><view class="name"><slot name="name"></slot></view><view class="custom"><slot name="custom"></slot></view>
</view>

css样式：

<style lang="scss" scoped>.common-title{display: flex;padding: 0 30rpx;justify-content: space-between;display: flex;align-items: center;.name{font-size: 40rpx;}}
</style>

 

2.使用插槽：

<common-title><template #name>每日推荐</template><template #custom><view class="date"><uni-icons type="calendar" size="18" color="#28b389"></uni-icons><uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat></view></template>
</common-title>

CSS代码：

.date{display: flex;align-items: center;margin-left: 5rpx;color: #28b389;}

 

有共性的地方--标题，我们使用name插槽，个性化的地方使用custom插槽。

上面的代码中使用uniapp的日期格式化扩展组件：uni-app官网

它的属性配置主要有以下几项：

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

Threshold Options

格式化组件会对时间进行用户友好转化，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分钟后”

#Format Options

 

format接收字符以及含义如下：

字符	说明
yyyy	四位年份
yy	两位年份
MM	两位月份（不足两位在前面补0）
M	月份，不自动补0
dd	两位天（不足两位在前面补0）
d	天，不自动补0
hh	两位小时（不足两位在前面补0）
h	小时，不自动补0
mm	两位分钟（不足两位在前面补0）
m	分钟，不自动补0
ss	两位秒（不足两位在前面补0）
s	秒，不自动补0
SSS	三位毫秒（不足三位在前面补0）
S	毫秒，不自动补0

 专题精选部分：

<view class="theme"><common-title><template #name>专题精选</template><template #custom><navigator url="" class="more">More</navigator></template></common-title>
</view>

CSS部分：

.theme{padding-top: 50rpx;.more{font-size: 32rpx;color:#888;}}