收藏
回答

能否直接在组件html上为组件根元素设置自定义class

问题模块 框架类型 问题类型 终端类型 操作系统 微信版本 基础库版本
框架 小程序 需求 客户端 iOS 6.6.6 2.0.0

如题,假如我有一个spinner组件,它在不同的页面里,显示的位置是不同的,因此我需要为每个spinner设置不同的class。再假设我有一个middle样式,将一个元素显示在页面正中。现在我希望在当前这个页面里,spinner组件显示在页面正中。


按照目前的小程序能力,我能想到的是以下几种实现方式。一种是在spinner外部包裹一个view,添加自定义class:

<view class="middle">
  <spinner></spinner>
</view>


另一种是为spinner定义externalClasses,然后从外部把“middle”这个class传给spinner组件。


最后一种是在spinner内部设置host选择器样式,但这会造成组件与自己的显示位置紧耦合,不利于修改。


可否实现如下功能:在spinner组件上直接设置class属性,可以将这些class直接挂在spinner组件的根元素上


即:

<spinner class="middle"></spinner>



---


补充:


之所以有这个需求,是因为我之前用vue时,vue支持此功能。但是vue强制要求每个组件只有一个根元素,而小程序并无此要求。


那么请问有没有什么优雅的方式实现我的需求?


最后一次编辑于  2018-05-20
回答关注问题邀请回答
收藏

2 个回答

  • Images。
    Images。
    2018-05-24

    ### 设置根元素样式

    #### :host

    在组件内部可以通过 `:host` 选择符,这个的好处是不需要在整个组件wxml外面单独用一个 `<view class="root-class">` 包装:


    ```CSS

    :host {

      ...

    }

    ```

    #### 组件名

    在页面内通过组件标签名为组件设置样式:


    ```CSS

    my-component: {

      ...

    }

    ```


    2018-05-24
    赞同
    回复
  • Albert Einstein [官]
    Albert Einstein [官]
    2018-05-20

    可参看文档 “外部样式类”

    https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

    2018-05-20
    赞同
    回复