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

自定义组件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用到什么地方






    
    
    
    
        
            
                
                
                
                
                    {{item.title.length >= 8 ? (str.substring(item.title , 0 , 7) + '...') : item.title}}
                
            
        
    


外部引用该自定义类的文件home.wxml

  

外部引用该自定义类的文件home.wxss

/*自定义的组件在用到margin等边距属性的时候有可能会不生效! , 应该用=> "外部样式类" */
.scroll {
    margin-top: 10rpx;
}

愿编程让这个世界更美好

你可能感兴趣的:(小程序的外部样式类的使用案例)