先來看效果：

如圖，“每日推薦”，“專題精選”這些公共標題有相同的地方，也有自己的獨特的地方，像這類有共性又有個性的可考慮使用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;}}