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

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

商品详情

产品参数

售后保障

思路

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

代码

首先是三个按钮

    
        
            {{item}}
        
    

根据当前选中的 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 属性来实现

总结

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