<template>
	<view class="index">
		<view class="header" :style="headerStyle">
			<view :style="'height: ' + statusBarHeight"> </view>
			<view class="header-info">
				<view class="title" :style="headerTextStyle"> 这个是标题 </view>
			</view>
		</view>
		<view class="bg">
			<image src="https://s.file.itsse.cn/tool/api/v1/bg" mode="widthFix"></image>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				appData: {},
				headerData: {
					bgColor: "",
					textColor: ""
				}
			}
		},
		computed: {
			navigationBarHeight() {
				return (this.appData.statusBarHeight * 2 + 88) + 'rpx'
			},
			statusBarHeight() {
				return (this.appData.statusBarHeight * 2 + 4) + 'rpx'
			},
			headerStyle() {
				return `height:${(this.appData.statusBarHeight * 2 + 88) + 'rpx'};background:${this.headerData.bgColor}`
			},
			headerTextStyle() {
				return `color:${this.headerData.textColor}`
			}
		},
		onShow() {
			const res = uni.getSystemInfoSync()
			this.appData = res;
		},
		methods: {
			onPageScroll(e) {
				if (e.scrollTop >= this.appData.statusBarHeight) {
					this.headerData.bgColor = '#fff'
					this.headerData.textColor = '#000'
				} else {
					this.headerData.bgColor = ''
					this.headerData.textColor = ''
				}
			},
		}
	}
</script>
<style lang="less" scoped>
	.bg {
		height: 1500px;
		background: #ccc;

		image {
			width: 100%;
		}
	}

	.header {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		transition: all .5s;

		.header-info {
			height: 44rpx;
			margin-top: 30rpx;

			.title {
				text-align: center;
				color: #fff;
				transition: all .5s;
			}
		}
	}
</style>