小程序中自定义一个标签切换效果

如图，实现如下的效果。点击三个 tab button，分别切换到不同页面

商品详情

产品参数

售后保障

思路

可以利用点击不同按钮，然后显示与隐藏界面来实现-

代码

首先是三个按钮

<view class="tabs-box">
    <block wx:for="{{['商品详情','产品参数','售后保障']}}" wx:key="item">
        <view class="tabs-item {{currentTabsIndex == index ? 'selected' : ''}}" bindtap="onTabsItemTap" data-index="{{index}}">
            {{item}}
        </view>
    </block>
</view>

根据当前选中的 tab button，切换到不同的 css 样式

class="tabs-item {{currentTabsIndex == index ? 'selected' : ''}}"

.tabs-item {
    width: 33.3%;
    color: #C7C7CB;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    border-bottom: 1rpx solid #D0D0D7;
}

.tabs-item.selected {
    /*color: #AB956D;*/
    color: rgba(171,149,109,.8);
    /*border-bottom: 2px solid #AB956D;*/
    border-bottom: 2px solid rgba(171,149,109,.8);
}

这是添加点击事件监听器

bindtap="onTabsItemTap"

这是给每一个 tab button 绑定一个数据，点击 tab button 的时候，就改变 currentTabsIndex 的值

onTabsItemTap: function (event) {
    var index =  event.currentTarget.dataset.index;
    this.setData({
        currentTabsIndex: index
    });
}

显示与隐藏界面，可以使用 hidden 属性来实现

<view class="product-detail-box">
    <view class="product-detail-imgs" hidden="{{currentTabsIndex != 0}}">
        商品详情
    </view>

    <view class="product-detail-properties" hidden="{{currentTabsIndex != 1}}">
        产品参数
    </view>

    <view class="product-detail-protect" hidden="{{currentTabsIndex != 2}}">
        售后保障
    </view>
</view>

总结

• 两套 css 样式
• 条件判断
• hidden 属性