- 需求的场景描述(希望解决的问题)
<!--组件 comp-a 模板内的代码-->
<view class="wrapper">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<!--<view wx:if=
{{此处判断slot.after是否存在,不存在则不生成此节点 }}
class="after-class">-->
<view wx:if=
{{!!slot.after}}
class="after-class">
<checkbox value="{{item.name}}" checked="{{item.checked}}" />
<slot name="after"></slot>
</view>
</view>
<!--引用组件的页面代码-->
<view>
<comp-a>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view slot="before">这里是插入到组件before slot中的内容</view>
</comp-a>
</view>
<!--页面中并没有使用 slot=“after”的内容,期望comp-a生成后的节点不包含 <view class="after-class"/>这个节点及其子内容 -->
- 希望提供的能力
在自定义组件中使用了多了 slot,希望能提供slot集合引用,用于判断某个slot是否存在,如果不存在则不生成部分视图(例如上面的:.after-class 视图)
你好,没有特别明白你的需求。请问是希望 slot 没有内容的时候提供默认内容吗?
首先: wx:if = {{true}} 时对应的view才会显示对吧?
其次: 当存在多个slot时,需要在wx:if = {{}} 里面能 判断是否存在某个slot,存在则显示对应的 view。
上面给的代码是放在 component 自定义组件里面的代码 。
明白了。我们考虑一下。
视觉上可以用css3去控制,但是不会触发组件的生命周期
<view class="has-next-box has-next-customer"> <slot></slot> </view> <view class="has-next-box has-next-default"> 没有更多数据 </view> .has-next-customer { display: none; } .has-next-customer:not(:empty) { display: block; } .has-next-customer:not(:empty)+.has-next-default { display: none; }