微信小程序 slot与block
slot与block的关系:
实例:
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.value}}
view>
view>
<view class="tabs_content">
<slot>slot>
view>
view>
pages\goods_list\index.wxml 文件:
<SearchInput>SearchInput>
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange" >
<block wx:if="{{tabs[0].isActive}}">
<view class="first_tab">
<navigator class="goods_item"
wx:for="{{goodsList}}"
wx:key="goods_id"
url="/pages/goods_detail/index?goods_id={{item.goods_id}}"
>
<view class="goods_img_wrap">
<image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}">image>
view>
<view class="goods_info_wrap">
<view class="goods_name">{{item.goods_name}}view>
<view class="goods_price">¥{{item.goods_price}}view>
view>
navigator>
view>
block>
<block wx:elif="{{tabs[1].isActive}}">1block>
<block wx:elif="{{tabs[2].isActive}}">2block>
?
Tabs>
素材来源:
参考资料: