cho mình hỏi muốn custom tabs theo degisn thì làm ntn vậy
hi @conheosua88
Vì tabs của bạn có UI khác so với component tabs của tini-ui
nên việc custom lại rất mất thời gian. Vì vậy mình xin gợi ý bạn cách viết một component tabs mới như sau:
Tại file index.js:
Page({
data: {
activatedTab: 1,
},
onChangeTab(event) {
const { index } = event.target.dataset;
this.setData({
activatedTab: index,
});
},
});
File index.txml
<view>
<view class="tab-header" style="display: flex;">
<view
class="tabs-header-item"
data-index="{{1}}"
onTap="onChangeTab"
>
<image src="https://picsum.photos/50/50" style="width: 50px; height: 50px;"/>
<view>Gói cơ bản</view>
</view>
<view
class="tabs-header-item"
data-index="{{2}}"
onTap="onChangeTab"
>
<image src="https://picsum.photos/50/50" style="width: 50px; height: 50px;"/>
<view>Gói nâng cao</view>
</view>
</view>
<view class="tab-content">
<view
class="tab-content-item"
tiki:if="{{activatedTab === 1}}"
>
Tab content 1
</view>
<view
class="tab-content-item"
tiki:if="{{activatedTab === 2}}"
>
Tab content 2
</view>
</view>
</view>
Bạn có thể làm như sau:
// tcss
.tabs-header-item-active {
background-color: red;
}
// txml
<view
class="tabs-header-item {{activatedTab === 1 ? 'tabs-header-item-active' : ''}}"
data-index="{{1}}"
onTap="onChangeTab"
>