微信小程序 组件和slot_[微信小程序]动态slot的使用

slot，Vue中叫做插槽，是向组件中插入内容的容器。小程序是支持动态slot的。

下面使用动态插槽建立一个完整的tab切换组件。

建立组件

组件的路径为components/tabSwitcher/tab-switcher

启用多slot支持

在组件的.js文件中添加下面代码：options:{

multipleSlots: true

}

定义组件的properties

在组件的.js文件中添加下面的代码：properties: {

titleList: Array

}

组件WXML

{{item.title}}

组件WXSS.tab-box {

position: fixed;

left: 0;

top: 0;

right: 0;

display: flex;

justify-content: space-around;

height: 90rpx;

line-height: 90rpx;

text-align: center;

}

.tab-box .tab {

flex: auto;

font-size: 26rpx;

color: #191919;

}

.tab-box .tab.active {

position: relative;

font-size: 30rpx;

font-weight: bold;

}

.tab-box .tab.active::after {

content: '';

position: absolute;

left: 50%;

bottom: 0;

transform: translateX(-50%);

height: 4rpx;

width: 48rpx;

background-color: #00bb2c;

}

.tab-list-box {

height: 100%;

box-sizing: border-box;

padding-top: 90rpx;

}

.tab-list-box .tab-swiper, .tab-list-box .tab-swiper-item {

height: 100%;

}

.tab-list-box .tab-scroll-view {

height: 100%;

}

使用组件

在页面的.json文件中引用组件："usingComponents": {

"TabSwitcher":"../components/tabSwitcher/tab-switcher"

}

定义组件需要的数据

在页面的.js文件中添加下面的代码：data: {

titleList: [{

title: '未开始'

},

{

title: '进行中'

},

{

title: '已结束'

}

]

}

在页面WXML中使用组件：

{{item}}

最后的效果是这样的：

这里代码还未完善，tab都是active的样式

总结

微信小程序的文档中并没有写明slot支持动态生成。

实现类似的功能也有很多途径，不一定非要用动态slot。