美文网首页
小程序中自定义一个标签切换效果

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

作者: 红烧排骨饭 | 来源:发表于2018-05-18 17:10 被阅读0次

    如图,实现如下的效果。点击三个 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 属性

    相关文章

      网友评论

          本文标题:小程序中自定义一个标签切换效果

          本文链接:https://www.haomeiwen.com/subject/jxogdftx.html