以下图的两个文件为例
tab.js
Page({data:{activeIdx: 0,tabs:[{id:1,name:"选项卡一",content:"111111111",active:true},{id:2,name:"选项卡二",content:"222222222",active:false},{id:3,name:"选项卡三",content:"333333333",active:false},]},changeItem(e){console.log(e)let activeIdx = -1const tabs = this.data.tabs.map((item,idx) => {if(e.detail.id === item.id){item.active = trueactiveIdx = idx}else{item.active = false}return item})this.setData({tabs,activeIdx})}})
tab.json
{"usingComponents": {"tabs":"/components/Tabs/Tabs"},"navigationBarTitleText": "选项卡"}
tab.wxml
<tabs list="{{tabs}}" bindhandlechange = "changeItem"><view>内容如下</view><view>{{tabs[activeIdx].content}}</view></tabs>
Tabs.js
Component({properties:{list:{type:Array,value:[]}},methods:{handleActive(e){console.log(e)this.triggerEvent("handlechange",{id:e.target.dataset.idkey})}}})
Tabs.json
{"component": true,"usingComponents": {}}
Tabs.wxml
<view class="tabs"><view class="tabs-title"><view class="tabs-title-item {{item.active ? 'active' : ''}}" wx:for="{{list}}"wx:key="id"bindtap="handleActive"data-idkey="{{item.id}}">{{item.name}}</view></view><view class="tabs-content"><slot></slot></view></view>
Tabs.wxss
.tabs-title{display: flex;}.tabs-title-item{flex:1;border-bottom: 1px solid #363636; padding: 6px 8px;text-align: center;}.active{color: red;font-size: 16px;border-bottom: 2px solid red;}.tabs-content{padding: 6px 8px;}
