小程序的外部样式类的使用案例

自定义组件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;
}

愿编程让这个世界更美好