小程序-tabBar简易版

Posted 2021-03-21 吴小明

<!-- 结构 -->

<view class="wrapper">

<block wx:for="{{desc}}">

<view bindtap="toggle" data-index="{{index}}" class="{{descIndex===index?\'active\':\'\'}}">{{item}}</view>

</block>

</view>

<view wx:if="{{descIndex===0}}">

商品详情

</view>

<view wx:if="{{descIndex===1}}">

产品参数

</view>

<view wx:if="{{descIndex===2}}">

售后保障

</view>

/* 样式 */

.wrapper{

display: flex;

justify-content: space-around;

}

.wrapper view{

flex: 1;

text-align: center;

line-height: 100rpx;

border-bottom: 1rpx solid #ccc;

}

.wrapper .active{

color: red;

font-weight: bold;

border-bottom: 1rpx solid red;

}

Page({
    data: {
        desc: ["商品详情", "产品参数", "售后保障"],
        descIndex: 0,
    },
    toggle(e) {
        this.setData({
            descIndex: e.currentTarget.dataset.index
        })
    },
})