Custum tabs theo degisn

#1

cho mình hỏi muốn custom tabs theo degisn thì làm ntn vậy

image
image708×649 51.3 KB

Custom steps theo degisn
#2

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>
#3

@tri.nguyen1 mình cảm ơn. cho mình hỏi nếu muốn khi active thêm class active thì thêm ntn hả bạn

#4

@conheosua88

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"
    >