微信小程序webview,a锚点跳转,回退时一直保留在原页面
时间:2022-07-22
本文章向大家介绍微信小程序webview,a锚点跳转,回退时一直保留在原页面,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
写在前面
公司业务,需要写一个页面导航,大概功能如下(APP排版,webview嵌套在小程序中)
当点击导航的时候,也可以自动跳转到相应的地方。使用的是a标签的锚点跳转
功能和效果都是在浏览器上测试正常的,但在小程序上遇到以下问题
点击回退按钮无法退出页面
当我们有点击过导航的时候,假设从One点击到Two
相当于url变动:index.html#One -> index.html#Two
当点击小程序右上角的回退按钮的时候,不会退出当前webview页面 返回到小程序的夫级页面
而是从index.html#Two -> index.html#One,页面也滑动到One区域。
如果在此页面上点击过10个导航,那么将需要点击11次回退才能退出当前页面。
不符合业务逻辑。所以需要更改实现方案。
解决方案
使用jq滑动跳转页面区域。
实现代码如下
.nav-one是一开始的a标签,现在改为div,但是class不改变
$(".nav-one").on("click", function(){
// 高亮状态改变
$(this).siblings().removeClass('nav-now');
$(this).addClass('nav-now');
// 区域名
let clickStr = $(this).data("str");
// 筛选到合适的html里的dom元素,获取高度,然后将浏览器向下滑动
$.each($("h1"), function(index,item){
if (item.innerText === clickStr){
let htmlDom = $('html');
htmlDom.scrollTop($(item).offset().top - 50);
return false;
}
});
});
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PWN:Largebin Attack
- 实现LRU算法
- 逻辑漏洞之无密码登录(vlcms)
- Python开发 常见异常和解决办法
- 约瑟夫问题
- AUC、ROC详解:原理、特点&算法
- akka-streams - 从应用角度学习:basic stream parts
- 多线程基础(四):volatile和可见性问题及happens-before原则
- 多线程基础(三):synchronized关键字及java内存模型简介
- 多线程基础(一): 线程概念及生命周期
- Windows下Redis服务的安装及Redis服务的命令行启动和关闭
- git hooks
- 二叉树的层次遍历 II
- Android开发笔记(一百七十三)给安装包APK文件瘦身
- 从 1 到 0 构建博客项目(1) -- 操作系统篇(1)