LinUI学习7 自定义组件的边距问题以及定义外部样式类

LinUI学习7 自定义组件的边距问题以及定义外部样式类

在使用自定义组件的时候，我们会发现如果我们自定义了一个组件“s-spu”,在home.wxml中调用

home.wxml

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

home.wxss

.spu-scroll{

  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给在原始组件上以达到同样的效果。

另外也可以在使用自定义组件时，用view标签将其包裹，在view上添加class也可以起到相同的方法