mudi-app/pages/user/pagoda/pagoda.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="toPurchase">
						购买预约
					</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 " @click="toPurchase">
				<view class="left ">
					购买预约
				</view>
				<view class="right active">
					我的神塔
				</view>
			</view>
		</view> -->

		<view class="screen">
			<u-tabs-swiper ref="uTabs" :list="options" :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 options.length" :key="index">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<ListItem class="item" :buy="false" :info="info" width="240rpx" height="210rpx"
							v-for="(item, index) in totle" @click.native="toInfo(info.status)" @lease="toLease"
							@resell="toResell">
						</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: 5
				},
				options: [{
						name: '全部'
					},
					{
						name: '可交易'
					},
					{
						name: '转卖中'
					},
					{
						name: '出租中'
					}
				]
			}
		},
		methods: {
			toPurchase() {
				uni.navigateTo({
					url: '../purchase/purchase'
				})
			},
			back() {
				if (this.vuex_backUrl === 'mian') {
					// 清除状态
					this.$u.vuex('vuex_backUrl', '')
					uni.switchTab({
						url: '../../mian/mian'
					})
					return
				}
				uni.switchTab({
					url: '../user'
				})
			},
			toInfo() {

			},
			toLease() {

			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				if (index === 0) {
					this.info.status = 5
				}
				if (index === 1) {
					this.info.status = 5
				}
				if (index === 2) {
					this.info.status = 7
				}
				if (index === 3) {
					this.info.status = 6
				}
				// console.log(index)
			},
			// 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'
				})
			},
			// 转租
			toLease() {
				uni.navigateTo({
					url: '../pagodaInfo/pagodaInfo?type=3'
				})
			},
			// 转卖
			toResell() {
				uni.navigateTo({
					url: '../pagodaInfo/pagodaInfo?type=2'
				})
			},
			toInfo(item) {
				console.log(item)
				if (item === 5) {
					uni.navigateTo({
						url: '../pagodaInfo/pagodaInfo'
					})
				}

				if (item === 6) {
					uni.navigateTo({
						url: '../pagodaInfo/pagodaInfo?type=3'
					})
				}

				if (item === 7) {
					uni.navigateTo({
						url: '../pagodaInfo/pagodaInfo?type=2'
					})
				}
			}
		},
		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: 306rpx;
			margin-bottom: 12rpx;
			background-color: #FFFFFF;
			padding-top: 48rpx;
		}
	}
</style>