<view class="viewport">
<!-- tabs -->
<view class="tabs">
<text class="item" v-for="(item, index) in orderTabs" :key="item.title" @tap="taphadle(index)">
{{ item.title }}
</text>
<!-- 游标 -->
<view class="cursor" :style="{ left: activeIndex * 20.5 + '%',width:'15px'}"></view>
</view>
<!-- 滑动容器 -->
<swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current" style="height: 800px;">
<!-- 滑动项 -->
<swiper-item v-for="item in 5" :key="item">
//滑动页中的每一项
</swiper-item>
</swiper>
</view>
page {
height: 100%;
overflow: hidden;
}
.viewport {
height: 100%;
display: flex;
flex-direction: column;
background-color: #fff;
}
// tabs
.tabs {
display: flex;
justify-content: space-around;
line-height: 60rpx;
margin: 0 10rpx;
background-color: #fff;
box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
position: relative;
z-index: 9;
.item {
flex: 1;
text-align: center;
padding: 20rpx;
font-size: 28rpx;
color: #262626;
}
.cursor {
position: absolute;
left: 0;
bottom: 0;
width: 20%;
height: 6rpx;
padding: 0 50rpx;
background-color: #27ba9b;
/* 过渡效果 */
transition: all 0.4s;
}
}
// swiper
.swiper {
background-color: #f7f7f8;
}
.container {
overflow: hidden;
}
.uni-body {
font-size: 10px;
margin-right: 60px;
}
data() {
return {
activeIndex: 1,//tab索引项
type: 0,//页面传参tab项
itemsArray: [],//暂时存储商品列表项
itemss: [],//存储商品列表项
orderTabs: [{
orderState: 0,
title: '全部'
},
{
orderState: 1,
title: '待付款'
},
{
orderState: 2,
title: '待发货'
},
{
orderState: 3,
title: '待收货'
},
{
orderState: 4,
title: '待评价'
},
],
};
},
onLoad() {
this.activeIndex = this.orderTabs.findIndex(tab => tab.orderState === this.type);
}
methods:{
//点击tab栏事件
async taphadle(index) {
this.activeIndex = index
}
}