新版微信页面底部导航问题

在移动端开发微信页面的过程中，出现这样一个问题

自己定好的底部导航栏下面会多出一行微信自带的底部返回栏，影响我们原型的体验，就需要对此做出优化；

首先明确问题所在

通过查询发现底部返回栏的机制是：页面出现跳转的时候会出现、页面向下滚动时会做隐藏；

解决问题

1. 针对上面的机制，对应两种办法去隐藏底部返回栏：

使用原生JS（已知是跳转出现，那我们就对跳转进行拦截,让所有的跳转使用 location.replace())

location.replace(URL)

如果你使用vue-router

let toURL = null
router.beforeEach((to, from, next) => {if (toURL === to.path) {next()}if (to.path !== from.path) {toURL = to.pathrouter.replace(to.path)next()}
})

2.使页面可以向下滚动

注意replace()带来的问题,当你使用replace()时,浏览器没有历史记录

如果你不需要,那么恭喜你不用继续看下去了
如果你很不幸,你需要历史记录,那么也存在两种场景

2.1 微信浏览时不需要

判断是否微信浏览,如果是就进行replace()

let isWeiXin= window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'

2.2 微信浏览时需要

自己实现一个历史记录数组,每次replace()时存入记录

新版微信页面底部导航问题相关推荐

Android 实现类似微信页面底部导航效果
Android 实现类似微信页面底部导航效果参考的时候需要修改的地方做一下更改,里面有一些多余的代码没有删除. .java里面的主要代码 public class MainActivity exte ...
微信设置底部导航栏
转微信小程序设置底部导航栏目方法 2016年10月27日 10:58:06 阅读数:50830 标签: 微信小程序收起个人分类: 微信小程序微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制 ...
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )
文章目录一.BottomNavigationBar 底部导航栏二.PageView 滑动页面三.BottomNavigationBar 与 PageView 关联四.完整代码示例 1.核心导航 ...
微信公众号网页底部不带返回栏或者想要隐藏微信的底部导航栏
简单直说吧 : 想要底部有导航栏跳转页面使用. window.location.href = "/wx/getAccLog?openid=" + openid; 不想要底部导航栏( ...
ionic3 动态设置tabs页面底部导航栏隐藏，并显示输入框添加评论
1.先上原始效果图: 2.完成后效果 2.实现思路: ion ...
h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结
Aphorism grow in errors overview 最近在写一个移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面底部的导航条想到的实现方案: 通过 ...
vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面这里写目录标题 vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...
安卓开发微信页面设计
功能要求 1.页面具有标题 2.具有四个页面,页面具有底部选择框,同时具有选择事件,当点击选择事件的时候进行页面切换 3.页面内容不超出边界且清晰思路分析该微信界面由三部分组成页面顶部标题栏(t ...
vue底部选择器_vue实现动态显示与隐藏底部导航的方法分析
vue实现动态显示与隐藏底部导航的方法分析本文实例讲述了vue实现动态显示与隐藏底部导航的方法.分享给大家供大家参考,具体如下: 在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不 ...

新版微信页面底部导航问题

在移动端开发微信页面的过程中，出现这样一个问题

注意replace()带来的问题,当你使用replace()时,浏览器没有历史记录

新版微信页面底部导航问题相关推荐

最新文章

热门文章