自定义组件index.js
在externalClasses数组中定义一个外部样式类名为: out-class
// components/spu-scroll/index.js
Component({
/**
* 定义一个外部样式类:
* 目的是在该组件引用的类文件home.wxss中使用这个外部样式类的margin-top属性;
* 如果是自定义的属性会出现使用margin等边距设置的时候不生效的问题;
* externalClasses是一个数组 , 它里边放的都是给该组件设置的外部样式类!
*/
externalClasses: ['out-class'] ,
/**
* 组件的属性列表, 接收属性
*/
properties: {
// 一个基础数据spu:
theme: Object,
// 一堆spu的列表:
spuList: Array
},
/**
* 组件的初始数据
*/
data: {},
/**
* 组件的方法列表
*/
methods: {}
});
自定义组件index.wxml
此处表明将外部样式类out-class用到什么地方
<!-- 外部导入linUI里的字符串处理 module里面的字符是什么text里的表达式就用什么! -->
<wxs src="../../miniprogram_npm/lin-ui/filter/string.wxs" module="str"></wxs>
<!--定义的外部样式类作用于最外层的view-->
<!-- 把定义好的外部样式类给我这个组件的最外层容器视图 -->
<view class="container out-class">
<!-- 每周上新图片: -->
<image class="title" src="{{theme.title_img}}"></image>
<!--scrollView必须设置开始flex布局的属性 enable-flex="true" :-->
<scroll-view class="scroll-view" enable-flex="true" scroll-x="true" scroll-y="false">
<block wx:for="{{spuList}}" wx:key="">
<view class="spu-container">
<!--图片:-->
<image src="{{item.img}}" class="spu-img"></image>
<!--文本 , 只显示一行 , 截取前面0 到7位置的字符 , substring方法是林UI提供的工具类方法!-->
<text class="spu-text">
{{item.title.length >= 8 ? (str.substring(item.title , 0 , 7) + '...') : item.title}}
</text>
</view>
</block>
</scroll-view>
</view>
外部引用该自定义类的文件home.wxml
<scroll out-class="scroll"> </scroll>
外部引用该自定义类的文件home.wxss
/*自定义的组件在用到margin等边距属性的时候有可能会不生效! , 应该用=> "外部样式类" */
.scroll {
margin-top: 10rpx;
}
