demingshangjia/pages/index/index.vue

<template>
	<view class="home">
		<view class="image-swiper">
			<u-swiper :list="imageList" mode="dot" border-radius="20"></u-swiper>
		</view>
		<view class="tab-swiper">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" active-color="#FF780F" inactive-color="#333333" font-size="26" height="98" :show-bar="false" swiperWidth="750" gutter="52"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" class="order-list">
					<view v-for="(item, index) in 5" :key="index">
						<OrderItem :cur="current"></OrderItem>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view v-for="(item, index) in 5" :key="index">
						<OrderItem :cur="current"></OrderItem>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view v-for="(item, index) in 5" :key="index">
						<OrderItem :cur="current"></OrderItem>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					{{ current }}
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view v-for="(item, index) in 5" :key="index">
						<OrderItem :cur="current"></OrderItem>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view v-for="(item, index) in 15" :key="index">
						<OrderItem :cur="current"></OrderItem>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="release-btn">
			<image src="/static/home/1.png"></image>
			<view class="text">发布</view>
		</view>
	</view>
</template>

<script>
import OrderItem from '@/components/order-item/index'
export default {
	data() {
		return {
			list: [{
				name: '全部订单'
			}, {
				name: '试穿订单'
			}, {
				name: '待处理订单'
			}, {
				name: '投诉骑手'
			}, {
				name: '已完成订单'
			}, {
				name: '退货订单'
			}],
			imageList: [
				{}, {}, {}
			],
			current: 0,
			swiperCurrent: 0,
		}
	},
	components: {
		OrderItem
	},
	onLoad() {

	},
	methods: {
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		animationfinish(e) {
			let current = e.detail.current;
			// this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
	}
}
</script>
<style lang="scss" scoped>
.home {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	display: flex;
	flex-direction: column;
	> uni-swiper {
		flex: 1;
	}
	.image-swiper {
		background-color: #ffffff;
		padding: 0 30rpx 16rpx;
	}
	.tab-swiper {
		margin: 2rpx 0 20rpx 0;
	}
	.release-btn {
		position: fixed;
		bottom: 475rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
		background: rgba(255,120,15,1);
		box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(255,120,15,0.22);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		> image {
			width: 36rpx;
			height: 36rpx;
			flex-shrink: 0;
			margin-bottom: 2rpx;
			background-color: aqua;
		}
		.text {
			font-size: 20rpx;
			color: rgba(255,255,255,1);
		}
	}
}
</style>