mudi-app/pages/user/lease_signed/lease_signed.vue

<template>
	<view class="lease">
		<u-navbar :is-back="false" :title-bold="true">
			<view class="slot-wrap">
				<view class="back" @click="back">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view class="center">
					<view class="left " @click="toBefLease">
						租赁预约
					</view>
					<view class="right active">
						租赁签约
					</view>
				</view>
			</view>
		</u-navbar>
		<!-- 		<view class="navbar">
			<view class="left" @click="back">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<view class="center">
				<view class="left " @click="toBefLease">
					租赁预约
				</view>
				<view class="right active">
					租赁签约
				</view>
			</view>
		</view>
 -->
		<view class="screen">
			<u-tabs-swiper ref="uTabs" :list="vuex_signed_tabs" :current="current" @change="tabsChange"
				:is-scroll="false">
			</u-tabs-swiper>
		</view>

		<view class="list">
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in vuex_signed_tabs.length" :key="index">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<ListItem class="item" :info="info" width="240rpx" height="210rpx"
							v-for="(item, index) in totle" @click.native="toInfo(info)">
						</ListItem>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	import ListItem from '../../../components/lease_list_item'
	export default {
		data() {
			return {
				current: 0,
				swiperCurrent: 0,
				totle: 8,
				info: {
					imgUrl: "../../../static/banner.png",
					name: '云凌藏隐陵园009号神塔',
					position: '72墓穴｜5层',
					location: '深圳市南山区桃源街道莫屋村24…',
					status: 2
				},
				vuex_signed_tabs: [{
						name: '已完成'
					},
					{
						name: '待签约'
					},
					{
						name: '已取消'
					}
				],
			}
		},
		methods: {
			back() {
				if (this.vuex_backUrl === 'mian') {
					// 清除状态
					this.$u.vuex('vuex_backUrl', '')
					uni.switchTab({
						url: '../../mian/mian'
					})
					return
				}
				uni.switchTab({
					url: '../user'
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				if (index === 0) {
					this.info.status = 2
				}
				if (index === 1) {
					this.info.status = 1
				}
				if (index === 2) {
					this.info.status = 4
				}
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.getList()
			},
			getList() {
				this.totle = this.totle + 5
			},
			toBefLease() {
				uni.navigateTo({
					url: '../beforehand_lease/beforehand_lease'
				})
			},
			toInfo() {
				uni.navigateTo({
					url: '../leaseInfo/leaseInfo'
				})
			}
		},
		components: {
			ListItem,
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,
	.swiper-box,
	.list,
		{
		height: 100%;
	}

	.lease {
		height: calc(100% - 210rpx);
	}

	.slot-wrap {
		display: flex;
		flex: 1;
		align-items: center;
		font-weight: 600;
		font-size: 32rpx;

		.back {
			margin-left: 36rpx;
		}

		.center {
			display: flex;
			align-items: center;
			margin-left: 154rpx;

			.left {
				margin-right: 60rpx;
			}

			.active {
				color: #E67D29;
			}
		}

	}

	.navbar {
		height: 96rpx;
		display: flex;
		align-items: center;
		box-shadow: 0px 0px 30rpx 0px #f1f1f1;

		.left {
			margin-left: 36rpx;
		}

		.center {
			display: flex;
			align-items: center;
			margin-left: 134rpx;
			font-size: 32rpx;

			.left {
				margin-right: 60rpx;
			}

			.active {
				color: #E67D29;
			}
		}
	}

	/deep/.uni-scroll-view-content {
		border-bottom: 1rpx solid #f8f8f8;
	}

	.list {
		height: 100%;
		background-color: #f5f7fa;

		.item {
			height: 372rpx;
			margin-bottom: 12rpx;
			background-color: #FFFFFF;
			padding-top: 48rpx;
		}
	}
</style>