注释很详细,直接上代码
上一篇
温馨提醒:此篇需要自定义组件的基础,如果不清楚请先看上一篇
新增内容:
1.单个插槽
2.多个插槽
单个插糟
源码:
myNav.wxml
<view class="navigationBar custom-class"><view class="navigationBarTitle title-class">自定义标题<slot></slot>//插槽位置</view>
</view>
index.wxml
<myNav custom-class="color-pink">
<text>🍉</text>
</myNav>
注意事项:没有注意事项
效果演示:
多个卡槽
多个卡槽需要提前声明一下
源码:
myNav.js
`myNav.js`
```js
Component({options:{multipleSlots:true//设置支持多个卡槽}
})
不同的插槽需要命名(自定义命名)
myNav.wxml
<view class="navigationBar custom-class"><view class="navigationBarTitle title-class"><slot name="left"></slot>自定义标题<slot name="right"></slot></view>
</view>
index.wxml
<myNav custom-class="color-pink">
<text slot="left">🍉</text>
<text slot="right">🐼</text>
</myNav>
效果演示