uniapp关于支付宝小程序或钉钉小程序标题栏自定义

支付宝小程序页面标题默认居左,若想居中需要自定义标题栏
思路:取消已有默认标题设置,自定义标题栏
微信小程序取消默认标题栏命令为再style中定义"navigationStyle":“custom”,而次对于支付宝小程序不起作用
需定义"transparentTitle":“always”,定义标题栏透明
“navigationBarTitleText”: “”,令标题为空
在页面中自定义标题栏
附代码如下

<template>
	<view>
		<view :style="{ height: iStatusBarHeight + 'px'}">
		</view>
		<view :style="{ height: iTitleBarHeight + 'px'}" style="positon:fixed;">
			<view class="bttitle" >状态栏标题</view>
		</view>
		<view>页面正文</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				iStatusBarHeight:0,
				iTitleBarHeight:48,
			}
		},
		onLoad(){
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.iTitleBarHeight = uni.getSystemInfoSync().titleBarHeight;
			console.log(uni.getSystemInfoSync())
			console.log(this.iStatusBarHeight);
		}
	}
</script>

<style>
	.bttitle{
		text-align: center;
		line-height: 48px;
	}
</style>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐