小程序选项卡
<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
})
}
})