页面基础布局

<template>
	<view class="allContainer">
		<!-- 固定tabbar，下面可滚动 -->
		<view class="tabBarContainer">
			<view class="leftImgContainer centerFlex">
				<img src="../../static/贵族/icon／aleft／black@2x.png" class="leftImg" />
			</view>
			<view class="rightContainer" style="width: 658rpx;">
				<v-tabs v-model="current" height="64rpx" :scroll="true" :tabs="tabs" @change="changeTab"
					:value="current"></v-tabs>
			</view>
		</view>
		<img src="../../static/贵族/img／mall／tac／bg@2x.png"
			style="width: 100vw;height: 100vh;position: fixed; z-index: -1;"></img>
		<scroll-view scroll-y  class="scrollHeight" :scroll-top="contentTop"
			@scroll="onScroll">
			<view class="container" >
				<swiper :style="{height: swiperItemHeight + 'px'}" class="swiper" :current="current"
					@change="changeTabIndex">
					<!-- 我记得是必须得先写好 -->
					<swiper-item v-for="item,index in 7">
						<view class="swiper-item-wrap">
							<scroll-view style="height: 100%;" scroll-y>
								<view>
									<swiperItem >
									</swiperItem>
								</view>
							</scroll-view>
						</view>
					</swiper-item>
					
				</swiper>
			</view>

		</scroll-view>

		<view class="bottomContainer">


		</view>
	</view>
</template>

<script>
	import swiperItem from './swiperItem/swiperItem.vue'
	export default {
		components: {
			swiperItem
		},
		data() {
			return {
				swiperHeight: 0,
				swiperItemHeight: 0,
				contentTop: 0,
				scrollTop: 0,
				current: 0,
				familyId: 0,
				setPaddingBottom:false,
				tabs: ['VIP1', 'VIP2', 'VIP3', 'VIP4', 'VIP5', 'VIP6', 'VIP7'],
			};
		},
		onLoad() {
			this.$nextTick(() => {
				this.contentTop = this.scrollTop
				this.$nextTick(() => {
					this.contentTop = 0
				})
				this.getSwiperItemHeight(this.current)
			})
		},
		onReady() {
			this.$nextTick(() => {
				this.contentTop = this.scrollTop
				this.$nextTick(() => {
					this.contentTop = 0
				})
				this.getSwiperItemHeight(this.current)
			})
		},
		methods: {
			loadData() {
				return new Promise((resolve, reject) => {
					this.loading = true
					let params = {
						dataType: this.current + 1,
						familyId: this.familyId
					}
					this.$httpRequest({
						url: '/family/familyStarRanks'
					}, params).then((res) => {
						this.loading = false
				
						resolve(true)
					})


				})

			},
			onScroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			getSwiperItemHeight(current = 0) {
				uni.createSelectorQuery()
					.in(this)
					.selectAll('.swiper-item-wrap')
					.boundingClientRect()
					.exec(res => {
						console.log(res, "上面res")
						this.swiperItemHeight = res[0][current].height
						console.log(this.swiperItemHeight, "this.swiperItemHeight ")
						
					})
			},

			async changeTabIndex(e) {
				// 在这里判断，发请求。
				if (this.loading == true) {

				} else {
					this.current = e.detail.current
					// await this.loadData()
					this.$nextTick(() => {
						this.contentTop = this.scrollTop
						this.$nextTick(() => {
							this.contentTop = 0
						})
						this.getSwiperItemHeight(e.detail.current)
					})
				}


			},
		}
	}
</script>

<style lang="scss">
	.swiper {
		// height: calc(100% - 262rpx);
			
		overflow-y: scroll;
		border: 1px solid gold;
	}
	
	
	
	.scrollHeight {
	
		  height: calc(100% - 376rpx);
	
		
		position: fixed;
		top: 176rpx;
		left: 0;
		background-color: transparent;
		
		background-color: blue;
		
	}
	.allContainer {
		.tabBarContainer {
			position: fixed;
			z-index: 999;
			top: 88rpx;
			width: auto;
			height: 88rpx;
			border: 1px solid red;
			box-sizing: border-box;
			text-align: center;
			background: transparent;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.leftImgContainer {
				width: 92rpx;
				height: 88rpx;
				border: 1px solid green;

				.leftImg {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.rightContainer {
				padding: 12rpx 0rpx;
			}
		}

		.bottomContainer {
			width: 750rpx;
			height: 200rpx;
			border: 1px solid mediumvioletred;
			background: transparent;

			left: 0;
			bottom: 0;
			position: fixed;
			z-index: 5;
		}
	}
</style>