js代码
在json里面配置"component": true,
// components/tab-header/tab-header.js
Component({
externalClasses: ['tabs-head', 'tabs-title', 'tabs-active'],
/**
* 组件的属性列表
*/
properties: {
titleList: Array,
title: {
type: String,
value: 'title'
},
cont: {
type: String,
value: '0'
}
},
/**
* 组件的初始数据
*/
data: {
},
fun () {
console.log(this.data.cont);
},
/**
* 组件的方法列表
*/
methods: {
// 子传父
// this.triggerEvent('titleList', {name: 'dwp'})
changeTab(data){
let page = data.target.dataset.page
this.setData({
cont: page
})
this.triggerEvent('changeTabs', page)
}
},
})
css
.tab-head {
padding-top: 20rpx;
display: flex;
justify-content: space-around;
background-color: #ffffff;
border-bottom: 2rpx solid #eeeeee;
}
.tab-head .tab-title {
color: #525252;
font-size: 30rpx;
padding: 12rpx 0;
}
.tab-head .tab-active {
color: #16BA63;
border-bottom: 4rpx solid #16BA63;
}
html
<view>
<view class="tab-head tabs-head">
<view wx:for="{{ titleList }}" wx:key="{{item}}">
<view class="tab-title tabs-title {{cont == index ? 'tab-active tabs-active': ''}}" bind:tap="changeTab" data-page="{{index}}">
{{item[title]}}</view>
</view>
</view>
</view>