LinUI學習7 自定義元件的邊距問題以及定義外部樣式類
阿新 • • 發佈:2021-01-20
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給在原始元件上以達到同樣的效果