微信的Tab导航栏
展示效果
js
data: {
navbar: ['全部', '待支付', '待发货', '待收货', '售后'],
currentTab: 0,
idx: '',
},
navbarTap: function (e) {
let idx= e.currentTarget.dataset.idx;
console.log("idx:"+idx);
this.setData({
currentTab: idx,
idx:idx
})
console.log("idx22:"+this.data.idx);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("optionsid:"+options.id);
this.setData({
idx:options.id,
currentTab: options.id,
})
console.log(this.data.idx+".."+this.data.currentTab);
},
wxml
<view class="navbar">
<text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
<!---->
<view hidden="{{currentTab!=0}}">
<view class="order">
000
</view>
</view>
<!---->
<view hidden="{{currentTab!=1}}">
<view class="order">
111
</view>
</view>
<!---->
<view hidden="{{currentTab!=2}}">
<view class="order">
222
</view>
</view>
<!---->
<view hidden="{{currentTab!=3}}">
<view class="order">
333
</view>
</view>
<view hidden="{{currentTab!=4}}">
<view class="order">
<view class="order-foot">
444
</view>
</view>
</view>
wxss
/* beauty_shop/mys/make_order/order.wxss *//* beauty_shop/mys/activity.wxss */
page{
display: flex;
flex-direction: column;
height: 100%;
background-color: #F7F7F7;
}
.navbar{
flex: none;
display: flex;
background: #fff;
}
.navbar .item{
position: relative;
flex: auto;
text-align: center;
line-height: 80rpx;
font-size: 30rpx;
}
.navbar .item.active{
color: #FF5A60;
font-size: 30rpx;
}
.navbar .item.active:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4rpx;
width: 87rpx;
margin-left: 36rpx;
background: #FF5A60;
}