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