uniapp-canteen/App.vue

<script>
	export default {
		globalData: {
			screenWidth: 0, // 屏幕宽度
			statusBarH: 0, // 状态栏的高度
			screenHeight: 0, // 屏幕高度
			customBarH: 0, // 标题导航栏高度
			windowHeight: 0, // 窗口可用高度，窗口总高度 - 状态栏的高度
		},
		onLaunch: function() {
			this.disableConsole();
			this.getSystemInfo();
		},
		methods: {
			// 获取手机设备信息
			getSystemInfo(){
				let res = uni.getSystemInfoSync();
				this.globalData.screenWidth = res.screenWidth;
				this.globalData.statusBarH = res.statusBarHeight;
				this.globalData.screenHeight = res.screenHeight;
				this.globalData.customBarH = res.statusBarHeight + 45;
				this.globalData.windowHeight = res.windowHeight - (res.statusBarHeight - 20);
				// #ifdef MP
				setTimeout(() => {
					let custom = uni.getMenuButtonBoundingClientRect()
					this.globalData.customBarH = custom.bottom + custom.top - res.statusBarHeight;
				
					if (this.globalData.customBarH <= 0) {
						this.globalData.customBarH = 40 + this.globalData.statusBarH;
					}
				}, 30);
				// #endif 
				// #ifdef MP-ALIPAY  
				this.globalData.customBarH = res.statusBarHeight + res.titleBarHeight;
				// #endif  
			},
			// 判断正式服屏蔽console输出
			disableConsole(){
				if(this.API.DEV == 'prod'){
					console.log = () => {};
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/uview-ui/index.scss";
	@import '@/common/styles/theme.css';
	@import '@/common/styles/common.css';
	
	//底部按钮
	.btn-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 1;
	}
	
	// loading加载
	.loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}
	.loading-more-text::before {
		content: '';
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: middle;
		-webkit-animation: weuiLoading 1s steps(12, end) infinite;
		animation: weuiLoading 1s steps(12, end) infinite;
		background-repeat: no-repeat;
		background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
		background-size: 100%;
	}
	@keyframes weuiLoading {
		0% {
			transform: rotate3d(0, 0, 1, 0deg);
		}
		100% {
			transform: rotate3d(0, 0, 1, 360deg);
		}
	}
</style>