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也可以起到相同的方法