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

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

在使用自定義組件的時候，咱們會發現若是咱們自定義了一個組件「s-spu」,在home.wxml中調用

home.wxml

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

home.wxss

.spu-scroll{

  margin-top: 20rpx;

}

 

這樣是沒法實現給自定義組件增長邊距的。

 

那麼如何給其增長邊距呢？

一、咱們須要在自定義組件的「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」來設置樣式了。

 

二、在調用該自定義組件時設置樣式

home.wxml

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

home.wxss

.spu-scrll{

  margin-top: 20rpx;

}

這樣就能夠成功的給自定義組件添加上外邊距了！

 

其餘方法

由於自定義組件設置class比較麻煩，所以若是先後有原生組件的能夠將margin給在原始組件上以達到一樣的效果。

另外也能夠在使用自定義組件時，用view標籤將其包裹，在view上添加class也能夠起到相同的方法