1. 程式人生 > 實用技巧 >LinUI學習7 自定義元件的邊距問題以及定義外部樣式類

LinUI學習7 自定義元件的邊距問題以及定義外部樣式類

LinUI學習7 自定義元件的邊距問題以及定義外部樣式類

在使用自定義元件的時候,我們會發現如果我們自定義了一個元件“s-spu”,在home.wxml中呼叫

home.wxml

<s-spuclass="spu-scrll"> </s-spu>

home.wxss

.spu-scrll{ margin-top:20rpx; }

這樣是無法實現給自定義元件增加邊距的。

那麼如何給其增加邊距呢?

1、我們需要在自定義元件的“s-spu.js”使用externalClasses關鍵字去定義一個class 。如

在s-spu.js新增

externalClasses:['l-class'], //"l-class"是自己命名的,也可以新增多個如 externalClasses:['l-class','a-class'],

在s-spu.wxml內放置該class生效的位置

<view class=" l-class"> </view >

這樣在呼叫這個自定義元件的時候就可以設定通過設定“l-class”來設定樣式了。

2、在呼叫該自定義元件時設定樣式

home.wxml

<s-spu l-class="spu-scroll"></s-spu>

home.wxss

.spu-scrll{ margin-top:20rpx; }

這樣就可以成功的給自定義元件新增上外邊距了!

因為自定義元件設定class比較麻煩,因此建議如果前後有原生元件的可以將margin給在原始元件上以達到同樣的效果