slot生成位置不对,WeUI样式显示不出来
发布于 6 年前 作者 guming 19492 次浏览 来自 问答

1 查看代码生成的结构

2.前台显示的样式

3.wxml中定义

4.各个组件的定义

4.1 weui-cells

4.2 weui-cell

4.3 weui-cell-header

4.4 weui-cell-body

4.5 weui-cell-footer

7 回复

抱歉,文档提前泄露了。这个变更将稍后上线。

组件多次嵌套后就出现问题了

看起来 slot 生成位置没有问题。请以页面实际状态为准,开发者工具调试器暂时显示不出slot节点。

现在我想实现weui-cells与weui-cell这样的列表,如果有两行时,就会出现样式问题,后来查明是<weui-cell>是样式

.weui-cells的直接下级,有没有办法像Angular或React那样,组件可以给自身加入样式,这样就解决问题了

代码结构如下:

<weui-cells class=“weui-cells”>    <weui-cell>

        <weui-cell-header>图片1</weui-cell-header>       

       <weui-cell-body>内容1</weui-cell-body>

    </weui-cell>

    <weui-cell>

        <weui-cell-header>图片2</weui-cell-header>       

         <weui-cell-body>内容2</weui-cell-body>

    </weui-cell>

</weui-cells>

我们正在准备上线这个特性,请关注近期更新。

引用官方的解决方案:

除此以外,组件可以指定它所在节点的默认样式,使用 :host 选择器。
 
代码示例:
 
/* 组件 custom-component.wxss */
:host {
  color: yellow;
}
:host(.dark) {
  color: black;
}
<!-- 页面的 WXML -->
<custom-component>这段文本是黄色的</custom-component>
<custom-component class="dark">这段文本是黑色的</custom-component>

小程序有没有办法直接把样式加入到 weui-cell-header,weui-cell-body上

回到顶部