0
点赞
收藏
分享

微信扫一扫

【微信小程序---自定义组件slot标签】

weednoah 2022-02-22 阅读 63

实现功能:


子组件页面显示components/Tabs/Tabs.wxml

// components/Tabs/Tabs.wxml
 <view class="tabs">
 	<view class="tabs_title">
 		<view 
        wx:for="{{tabs}}" 
        wx:key="id" 
        class="title_item {{item.isActive?'active':''}}" bindtap="handleItemTap"                     
        data-index="{{index}}">
 			{{item.name}}
 		</view>

 	</view>
 	<view class="tabs_content">
 		<slot></slot>
 	</view>
 </view>

<slot></slot>这个标签 其实就是一个占位符 插槽,等到父组件调用子组件的时候 在传递 标签过来 最终 这些被传递过来的标签 就会 替换 slot 插槽的位置


父组件页面显示pages/demo-component/demo-component.wxml

// pages/demo-component/demo-component.wxml

<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">

	<block wx:if="{{tabs[0].isActive}}">卧室标题首页下面的内容</block>
	<block wx:elif="{{tabs[1].isActive}}">卧室标题原创下面的内容</block>
	<block wx:elif="{{tabs[2].isActive}}">卧室标题分类下面的内容</block>
	<block wx:else="{{tabs[3].isActive}}">卧室标题关于下面的内容</block>

</Tabs>

 

举报

相关推荐

0 条评论