c5_labsci/fapp/ciyon_ap/pages/demo/case/pagefix.vue

<template>
	<ciy-header :title="'fix页面位置计算'" transparent></ciy-header>
	<view style="position: fixed;bottom:0;z-index: 2;">
		<button class="btn" @tap="addscroll">滚动切换</button>
		<button class="btn" @tap="addheight">高度切换</button>

	</view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:hei+'px'}"></view>
	<view class="viw">
		<view>view:{{viw}}</view>
		<view>screenHeight:{{sys.screenHeight}}　　windowHeight:{{sys.windowHeight}}</view>
		<view>statusBarHeight:{{sys.statusBarHeight}}　　windowBottom:{{sys.windowBottom}}</view>
		<view>sA:{{tostr(sys.safeArea)}}</view>
		<view>safeAreaInsets:{{tostr(sys.safeAreaInsets)}}</view>
	</view>
	<view class="sw fix l dat_f">
		Fix: 0{{dat_f}}
		<view style="top:250px;" class="sw fix l dat_ff">
			f-Fix: 250{{dat_ff}}
			<view style="top:300px;" class="sw fix l dat_fff">
				f-f-Fix: 300{{dat_fff}}
			</view>
			<view style="top:100px;" class="sw abs l dat_ffa">
				f-f-Abs: 100{{dat_ffa}}
			</view>
		</view>
		<view style="top:300px;" class="sw abs l dat_fa">
			f-Abs: 300{{dat_fa}}
			<view style="top:500px;" class="sw fix l dat_faf">
				f-a-Fix: 500{{dat_faf}}
			</view>
			<view style="top:150px;" class="sw abs l dat_faa">
				f-a-Abs: 150{{dat_faa}}
			</view>
		</view>
	</view>
	<view style="border-top: 1px solid #ee00ff;" class="sw abs r dat_a">
		Abs: 0{{dat_a}}
		<view style="top:250px;" class="sw fix r dat_af">
			a-Fix: 250{{dat_af}}
			<view style="top:300px;" class="sw fix r dat_aff">
				a-f-Fix: 300{{dat_aff}}
			</view>
			<view style="top:100px;" class="sw abs r dat_afa">
				a-f-Abs: 100{{dat_afa}}
			</view>
		</view>
		<view style="top:300px;" class="sw abs r dat_aa">
			a-Abs: 300{{dat_aa}}
			<view style="top:500px;" class="sw fix r dat_aaf">
				a-a-Fix: 500{{dat_aaf}}
			</view>
			<view style="top:150px;" class="sw abs r dat_aaa">
				a-a-Abs: 150{{dat_aaa}}
			</view>
		</view>
	</view>
	<view class="fx">
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
	</view>
	<view :style="{height:hei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view :style="{height:tophei+'px'}"></view>
	<view style="height:100px"></view>
	<view style="height:100px"></view>
	<view style="height:100px"></view>
	<view style="height:100px"></view>
	<view style="height:100px"></view>
	<view style="height:100px"></view>
	<view style="height:100px"></view>
	<view style="height:100px"></view>
	<view style="height:100px"></view>
</template>

<style>
	.viw {
		font-size: 0.8em;
	}

	.viw>view {
		white-space: nowrap;
	}

	.fix {
		position: fixed;
	}

	.abs {
		position: absolute;
	}

	.sw {
		z-index: 2;
		border-top: 1px solid #00aaff;
		white-space: nowrap;
		box-sizing: border-box;
		font-size: 0.9em;
	}

	.fx {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 0;
		box-sizing: border-box;
	}

	.fx>view:nth-child(odd) {
		box-sizing: border-box;
		height: 50px;
		border-left: 8px solid #00aa00;
		border-right: 8px solid #00aa00;
		border-bottom: 1px dashed #cccccc;
	}

	.fx>view:nth-child(even) {
		box-sizing: border-box;
		height: 50px;
		border-left: 8px solid #cc0000;
		border-right: 8px solid #cc0000;
		border-bottom: 1px solid #eea3a5;
	}

	.l {
		left: 10px;
	}

	.r {
		right: 10px;
	}
</style>

<script>
	export default {
		data() {
			return {
				sys: {},
				stdata: false,
				hei: 0,
				tophei: 0,
				viw: 0,
				dat_a: 0,
				dat_af: 0,
				dat_aff: 0,
				dat_afa: 0,
				dat_aa: 0,
				dat_aaa: 0,
				dat_aaf: 0,
				dat_f: 0,
				dat_ff: 0,
				dat_fff: 0,
				dat_ffa: 0,
				dat_fa: 0,
				dat_faa: 0,
				dat_faf: 0
			}
		},
		onLoad() {
			setTimeout(() => {
				this.getdata2();
				this._tick = setInterval(() => {
					this.getdata2();
				}, 1000);
			}, 100);
		},
		onUnload() {
			clearInterval(this._tick);
		},
		methods: {
			addscroll() {
				if (this.hei)
					this.hei = 0;
				else
					this.hei = 1000;
			},
			addheight() {
				if (this.tophei)
					this.tophei = 0;
				else
					this.tophei = 100;
			},
			getdata2() {
				this.sys = uni.getWindowInfo();
				this.classrect('viw');
				this.classrect('dat_f');
				this.classrect('dat_ff');
				this.classrect('dat_fff');
				this.classrect('dat_ffa');
				this.classrect('dat_fa');
				this.classrect('dat_faf');
				this.classrect('dat_faa');
				this.classrect('dat_a');
				this.classrect('dat_af');
				this.classrect('dat_aff');
				this.classrect('dat_afa');
				this.classrect('dat_aa');
				this.classrect('dat_aaf');
				this.classrect('dat_aaa');
			},
			classrect(cls) {
				uni.createSelectorQuery().in(this).select('.' + cls).boundingClientRect(data => {
					if (!data)
						return this.alert('data.' + cls + '未获取到');
					this[cls] = '/' + this.toint(data.top) + '; h:' + this.toint(data.height) + '; l:' + this
						.toint(data.left);
				}).exec();
			}
		}
	}
</script>