微信小程序---选项卡

小程序选项卡

<view class="box">
<view class="item '{{index===0?'active':''}}'" data-index="{{0}}" bindtap="fn">1</view>
<view class="item '{{index===1?'active':''}}'" data-index="{{1}}" bindtap="fn">2</view>
<view class="item '{{index===2?'active':''}}'" data-index="{{2}}"  bindtap="fn">3</view>
<view class="item '{{index===3?'active':''}}'" data-index="{{3}}"  bindtap="fn">4</view>
</view>
<view class="bottom">
<view class="list '{{index===0?'one':''}}'"  data-index="{{0}}"  bindtap="fn">1</view>
<view class="list '{{index===1?'one':''}}'"  data-index="{{1}}" >2</view>
<view class="list '{{index===2?'one':''}}'" data-index="{{2}}" >3</view>
<view class="list '{{index===2?'one':''}}'" data-index="{{4}}" >4</view>
</view>

/* pages/test/test.wxss */
.box{
    width: 100%;
    height:100rpx;
    background-color: chocolate;
    display: flex
}
.item{
    width:25%;
    height: 100rpx;
    justify-content: space-around;
    text-align: center;
    line-height: 100rpx;
}
.bottom{
    width: 100%;
    height: 500rpx;
    position: relative;
}
.active{
    background-color: cyan;
}
.list{
    width: 100%;
    height: 500rpx;
    position: absolute;
    left: 0;
    top: 0;
background-color: #ccc;
text-align: center;
line-height: 500rpx;

}
.one{
    z-index: 1;
}

Page({

    /**
     * 页面的初始数据
     */
    data: {
        index:2
    },
fn(e){
    console.log(111);
    console.log(this.data)
    console.log(e);
    // let index=e.target.dataset.index;
    let {index}=e.target.dataset;
    console.log(index);
    this.setData({
        index
    })
}
})