uniapp发布微信小程序适应头部

最新推荐文章于 2024-07-15 15:39:09 发布

负者歌于途，

最新推荐文章于 2024-07-15 15:39:09 发布

阅读量1k

点赞数 1

分类专栏： uniApp 文章标签：小程序 vue.js

本文链接：https://blog.csdn.net/qq_36893984/article/details/105229059

版权

uniApp 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

uni.getSystemInfo({
	success: function(res) {
		console.log(res);
        //获取到的res的值
            {   SDKVersion: "2.9.2"        //客户端基础库版本
                batteryLevel: 100        //
                benchmarkLevel: 1       //基准水平
                brand: "devtools"      //手机品牌
                devicePixelRatio: 2    //分辨率
                errMsg: "getSystemInfo:ok"
                fontSizeSetting: 16    //用户设置字体大小 （px）
                language: "zh"        //应用设置语言
                model: "iPhone 6/7/8"  //手机型号
                pixelRatio: 2            //设备像素比
                platform: "devtools"        //客户端平台 ios android        
                safeArea: {right: 375, bottom: 667, left: 0, top: 20, width: 375, …}
                safeAreaInsets: {top: 20, left: 0, right: 0, bottom: 0}
                screenHeight: 667        //屏幕高度
                screenWidth: 375        //屏幕宽度
                statusBarHeight: 20        //状态栏高度
                system: "iOS 10.0.1"        //操作系统版本
                version: "7.0.4"            //版本号
                windowHeight: 667        //可使用窗口高度
                windowWidth: 375        //可使用窗口宽度
        }
		that.statusBarHeight = res.statusBarHeight
        // 获取到的是头部状态栏的高度
		// #ifdef MP-WEIXIN
		let menu = wx.getMenuButtonBoundingClientRect();
        //获取到的胶囊的信息
        //以屏幕左上角为原点，获取到的信息
        {
            bottom: 58
            height: 32
            left: 278
            right: 365
            top: 26
            width: 87
        }
        // 获取胶囊的信息
		that.barHeight = menu.bottom + menu.top - res.statusBarHeight * 2;
		// #endif
	}
})

使用方法

<view class="topBox">
                //头部状态栏占位
		<view :style="{height: statusBarHeight+ 'px'}"></view>
                //自定义头部区域
		<view class="biaoyiji" :style="{height: barHeight+ 'px'}">
		<view class="titlebox">
			我的收益
		</view>
		<view class="titlebox1" @tap="guogeshow">
			分享记录
		</view>
		<view class="leftBack" @tap="nabvab">
			<text class="cuIcon-back"></text>
		</view>
		</view>
</view>

样式，我使用的是定位，有什么好的方法可以分享一下

.topBox {
		width: 750rpx;
		background-color: #fff;
	
		.biaoyiji {
			width: 750rpx;
			position: relative;
	
			.titlebox {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000;
			}
	
			.titlebox1 {
				position: absolute;
				top: 50%;
				right: 32rpx;
				transform: translateY(-50%);
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000;
			}
	
			.leftBack {
				position: absolute;
				left: 32rpx;
				top: 50%;
				transform: translateY(-50%);
				color: #BFBFBF;
			}
		}
	}