69 lines
2.1 KiB
Vue
69 lines
2.1 KiB
Vue
<!-- 滑动切换选项卡演示(标准写法) -->
|
||
<template>
|
||
<PageNoContainer ref="pageContainer" title="我的订单" :showBack="true">
|
||
<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
|
||
<z-paging-swiper :fixed="false">
|
||
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
|
||
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
||
<template #top>
|
||
<z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
|
||
</template>
|
||
<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面 -->
|
||
<swiper class="swiper" :current="current" @transition="swiperTransition"
|
||
@animationfinish="swiperAnimationfinish">
|
||
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
|
||
<order-list-item :tabIndex="index" :currentIndex="current" :responseCallback="responseCallback">
|
||
|
||
</order-list-item>
|
||
</swiper-item>
|
||
</swiper>
|
||
</z-paging-swiper>
|
||
|
||
</PageNoContainer>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
const paging = ref(null);
|
||
const tabs = ref(null);
|
||
|
||
const current = ref(0);
|
||
const tabList = ref(['全部', '待发货', '待收货', '评价', '售后']);
|
||
|
||
onLoad((options) => {
|
||
console.log(options);
|
||
if (options.type) {
|
||
current.value = Number(options.type);
|
||
}
|
||
});
|
||
// tabs通知swiper切换
|
||
const tabsChange = (index) => {
|
||
current.value = index;
|
||
}
|
||
|
||
// swiper滑动中
|
||
const swiperTransition = (e) => {
|
||
tabs.value.setDx(e.detail.dx);
|
||
}
|
||
|
||
// swiper滑动结束
|
||
const swiperAnimationfinish = (e) => {
|
||
current.value = e.detail.current;
|
||
tabs.value.unlockDx();
|
||
}
|
||
const responseCallback = (params) => {
|
||
return new Promise((resolve, reject) => {
|
||
resolve({ list: [] });
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.swiper {
|
||
height:90vh;
|
||
}
|
||
|
||
.swiper-item {
|
||
}
|
||
</style>
|