uniapp 解决H5页面在微信下访问,显示双标题的问题

实现方法其实有很多,如果不需保留左侧返回键,那么直接在pages.json里给页面配置一下就行

"navigationStyle": "custom"

或者在每个需要返回键的页面自己定一个返回效果。

如果既要保留返回,又不想去给每个页面自定义导航,那么就看下面终极方案:
直接App.vue 里

onLaunch: function() {
	console.log('App Launch')
	// 微信H5环境下处理标题栏
	if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
	  // 动态添加样式处理重复标题问题
	  const style = document.createElement('style')
	  style.textContent = `
	      /* 隐藏uni-app自带的标题文本 */
	      .uni-page-head__title {
		  opacity: 0 !important;
	      }
	      
	      /* 保持导航栏本身和返回按钮可见 */
	      .uni-page-head,
	      .uni-page-head__left,
	      .uni-page-head-btn {
		  visibility: visible !important;
	      }
	  `
	  document.head.appendChild(style)
}

来自Cursor给出的方案,亲测可用~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值