效果图
先在components里面新建组件
tabs.js代码
Component({
options: {
multipleSlots: true
},
properties: {
tabTitle: {
type: Array,
value: []
}
},
lifetimes: {
attached: function () {
console.log("父组件传递的值------------>", this.properties.tabTitle)
}
},
data: {
current: 0
},
methods: {
swichNav(e) {
if (this.data.current == e.currentTarget.dataset.index) {
return false
} else {
this.setData({
current: e.currentTarget.dataset.index
})
}
}
}
})
tabs.wxml代码
<view>
<view class="order-list-tit">
<view class="sel {{current==index?'on':''}}" data-index="{{index}}" wx:for="{{tabTitle}}" wx:key="*this"
bindtap="swichNav">{{item}}</view>
</view>
<view>
<view wx:for="{{tabTitle}}" wx:key="*this" class="{{current==index?'show':'hidden'}}">
<slot name="{{index}}"></slot>
</view>
</view>
</view>
tabs.wxcc代码
.order-list-tit {
width: 100%;
height: 48px;
border-radius: 12px 12px 0px 0px;
display: flex;
}
.sel {
font-size: 17px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 13px;
margin-left: 24px;
text-align: center;
position: relative;
}
.on {
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #303133;
color: #121212;
text-align: center;
}
.show {
display: block;
}
.hidden {
display: none;
}
.on:after {
content: '';
position: absolute;
width: 24px;
height: 5px;
background: var(--themeItem);
border-radius: 3px;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
}
需要用到组件的页面进行导入JSON
conp.json代码
{
"usingComponents": {
"tabs":"../../components/tabs/tabs"
}
}
conp.js代码
Page({
data: {
tabTitle:['点餐','订餐'],
},
})
conp.wxml代码
<tabs tabTitle="{{tabTitle}}" tabs="{{tabs}}">
<view slot="0">
点餐页面
</view>
<view slot="1">
订餐页面
</view>
</tabs>