美文网首页
微信小程序 - 自定义组件

微信小程序 - 自定义组件

作者: 叫我王必过 | 来源:发表于2019-05-20 17:32 被阅读0次

    一、啥是自定义组件

    二、创建自定义组件

    • 一个自定义组件由json、wxml、wxss、js4个文件组成。
    • 需要在json文件中进行自定义组件声明(component设置为true)
    • 在wxml中编写组件模板,写法与页面写法类似。
    // 配置
    Component({
      options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
      },
      properties: { /* ... */ },
      methods: { /* ... */ }
    })
    
    <!-- 组件模板 -->
    <view class="wrapper">
      <slot name="before"></slot> 相当于容器
      <view>这里是组件的内部细节</view>
      <slot name="after"></slot>
    </view>
    
    <!-- 引用组件的页面模板 -->
    <view>
      <component-tag-name>
        <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
        <view slot="before">这里是插入到组件slot name="before"中的内容</view>
        <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
        <view slot="after">这里是插入到组件slot name="after"中的内容</view>
      </component-tag-name>
    </view>
    

    三、组件的样式

    组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:

    • 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
    • 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
    • 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
    • 继承样式,如 font 、 color ,会从组件外继承到组件内。
    • 除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。

    相关文章

      网友评论

          本文标题:微信小程序 - 自定义组件

          本文链接:https://www.haomeiwen.com/subject/odgjmqtx.html