deming/pageE/order/Index.vue

<template>
	<view class="order">
		<view>
			<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="26" @change="tabsChange" height="88" :gutter="30"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom">
					<view>
						<view class="item-container" v-for="(item, index) in orderList" :key="index">
							<OrderItem :current="current"></OrderItem>
						</view>
						<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;">
					<view>
						<view class="item-container" v-for="(item, index) in orderList" :key="index">
							<OrderItem :current="current"></OrderItem>
						</view>
						<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;">
					<view>
						<view class="item-container" v-for="(item, index) in orderList" :key="index">
							<OrderItem :current="current"></OrderItem>
						</view>
						<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;">
					<view>
						<view class="item-container" v-for="(item, index) in orderList" :key="index">
							<OrderItem :current="current"></OrderItem>
						</view>
						<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;">
					<view>
						<view class="item-container" v-for="(item, index) in orderList" :key="index">
							<OrderItem :current="current"></OrderItem>
						</view>
						<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom">
					<view>
						<view class="item-container" v-for="(item, index) in orderList" :key="index">
							<OrderItem :current="current"></OrderItem>
						</view>
						<u-loadmore :status="loadStatus[5]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;" @scrolltolower="reachBottom">
					<view>
						<view class="item-container" v-for="(item, index) in orderList" :key="index">
							<OrderItem :current="current"></OrderItem>
						</view>
						<u-loadmore :status="loadStatus[6]" bgColor="#ECECEC" margin-bottom="20"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import OrderItem from '@/components/mine/order-item/index'
export default {
	data() {
		return {
			list: [{
				name: '全部'
			}, {
				name: '待支付'
			}, {
				name: '已取消'
			}, {
				name: '待收货'
			}, {
				name: '试穿试送'
			}, {
				name: '待评价'
			}, {
				name: '售后'
			}],
			orderList: 5,
			loadStatus: ['loadmore','loadmore','loadmore','loadmore','loadmore','loadmore','loadmore'],
			page: 0,
			current: 0,
			swiperCurrent: 0,
		}
	},
	components: {
		OrderItem
	},
	onLoad(option) {
		if(option.current) {
			this.current = Number(option.current);
			this.swiperCurrent = this.current;
		}
	},
	methods: {
		reachBottom() {
			// console.log(this.page);
			if(this.page >= 3) return;
			// 修改当前的 loadStatus
			console.log(this.loadStatus);
			this.loadStatus.splice(this.current, 1, "loading");
			this.page++;
			setTimeout(() => {
				this.orderList += 5;
				this.loadStatus.splice(this.current, 1, "nomore");
			}, 1200);
		},
		tabsChange(index) {
			this.current = Number(index);
			this.swiperCurrent = Number(index);
		},
		animationfinish(e) {
			let current = Number(e.detail.current);
			this.swiperCurrent = current;
			this.current = current;
		}
	}
};
</script>
<style lang="scss" scoped>
.order {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	display: flex;
	flex-direction: column;
	> uni-swiper {
		flex: 1;
	}
	.swiper-item {
		.item-container {
			padding: 20rpx 30rpx;
		}
	}
}
</style>