uniapp 之 实现商品详情的锚点跳转(类似京东商品详情-点击顶部按钮跳转的对应的页面的内容区域)

类似京东商品详情-点击顶部详情跳转到页面对应的详情区域,点击评价跳转到页面对应的评价区域等。

照例,先封装方法:

封装方法

util.js

/*** 锚点跳转(如:商品详情页面跳转)* @param {string} targetId 目标id* @param {string} rootId 外层盒子根id*/
export const goByAnchor = (targetId, rootId) => {if (targetId) {uni.createSelectorQuery().select('#' + targetId).boundingClientRect(data => {// 目标位置节点 类或者 iduni.createSelectorQuery().select("#" + rootId).boundingClientRect(res => {// 最外层盒子节点类或者 iduni.pageScrollTo({duration: 300, // 过渡时间  scrollTop: data.top - res.top - 88, // 到达距离顶部的top值})}).exec()}).exec();} else {uni.pageScrollTo({scrollTop: 0,duration: 300});}
}/*** 获取当前元素的一些info,如:距离顶部的距离*/
export const getElementInfoById = (elementId) => {return new Promise((resolve) => {uni.createSelectorQuery().select('#' + elementId).boundingClientRect(data => {resolve(data)}).exec()})
}

页面调用

<view class="goods-detail" id="goods-detail">
<!-- 顶部导航 -->
<uni-nav-bar left-icon="back" fixed statusBar :border="false" :backgroundColor="navBg" class="custom-nav" @clickLeft="pageBack"><template v-if="navBg == '#fff'"><view class="nav-title flex-around-center"><text :class="{ 'active-nav-title': !navTab }" @click="handleAnchor()">宝贝</text><text :class="{ 'active-nav-title': navTab == 'goodsStand' }" @click="handleAnchor('goodsStand')">规格</text><text :class="{ 'active-nav-title': navTab == 'goodsEvaluation' }" @click="handleAnchor('goodsEvaluation')">评价</text><text :class="{ 'active-nav-title': navTab == 'goodsDetail' }" @click="handleAnchor('goodsDetail')">商品详情</text></view></template>
</uni-nav-bar>
<!-- 其他内容 --><!-- 规格 -->
<view class="goods-stand" id="goodsStand">
<!-- 内容 -->
</view><!-- 评价 -->
<view class="goods-evaluation" id="goodsEvaluation">
<!-- 内容 -->
</view><!-- 商品详情 -->
<view class="img-list" id="goodsDetail">
<!-- 内容 -->
</view></view>
data() {return {navBg: 'rgba(0, 0, 0, .05)', // 顶部导航栏的背景色navTab: '', // 顶部导航的tab标识}
},
// 这里通过页面生命周期监听滚动条的位置,对应的回显高亮tab
onPageScroll(e) {if (e.scrollTop > 0) {this.navBg = '#fff'getElementInfoById('goodsStand').then((res) => {if (res.top < 88) {this.navTab = 'goodsStand'}})getElementInfoById('goodsEvaluation').then((res) => {if (res.top < 88) {this.navTab = 'goodsEvaluation'}})getElementInfoById('goodsDetail').then((res) => {if (res.top < 88) {this.navTab = 'goodsDetail'}})} else {this.navTab = ''this.navBg = 'rgba(0, 0, 0, .05)'}
},
methods: {// 锚点跳转handleAnchor(type) {this.navTab = typegoByAnchor(type, 'goods-detail')},
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/749165.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sqllab第十八关通关笔记

知识点&#xff1a; UA注入 不进行url解析&#xff0c;不能使用 %20 编码等操作出现在User-agent字段中一般为insert语句 insert 表名(字段1&#xff0c;字段2&#xff0c;。。。) values(数据1&#xff0c;数据2&#xff0c;。。。) 通过admin admin进行登录发现页面打印出了…

【中等】保研/考研408机试-二叉树相关

目录 一、基本二叉树 1.1结构 1.2前序遍历&#xff08;注意三种遍历中Visit所在的位置&#xff09; 1.2中序遍历 1.3后序遍历 二、真题实战 2.1KY11 二叉树遍历&#xff08;清华大学复试上机题&#xff09;【较难】 2.2KY212 二叉树遍历二叉树遍历&#xff08;华中科技大…

通信信号处理中的调制识别技术及其基于C++ Qt的实现

在现代通信系统中,调制技术扮演着至关重要的角色。调制是将基带信号转换为适合在信道中传输的高频信号的过程。常见的模拟调制方式有幅度调制(AM)和频率调制(FM),数字调制方式有频移键控(FSK)和相移键控(PSK)。为了实现高效、可靠的通信,接收端必须能够准确识别发送端所采用的调…

详解命令docker run -d --name container_name -e TZ=Asia/Shanghai your_image

docker run 是Docker的主要命令&#xff0c;用于从镜像启动一个新的容器。下面详细解释并举例说明 -d, --name, -e TZ 参数的用法&#xff1a; -d 或 --detach&#xff1a; 这个标志告诉Docker以守护进程&#xff08;后台&#xff09;模式运行容器。这意味着当你执行 docker ru…

前端学习笔记|JavaScript基础

JS基础 数据类型 基于动力节点视频。 Number、String、Boolean、object 强制转换 Number 强转,boolean强转(undefined、null、NaN都是转成false)&#xff0c;String强转 myAge Number("123445"); Boolean(0); String(123);parseInt、parseFloat 遇到非数字&…

Java——网络编程

网络编程基础类 InetAddress类 java.net.InetAddress类用来封装计算机的IP地址和DNS(没有端口信息),它包括一个主机名和一个ip地址,是java对IP地址的高层表示。大多数其他网络类都要用到这个类&#xff0c;包括Sorket、ServerSocker、URL、DatagramSorket、DatagramPacket等常…

15.7k stars一个实用型OCR,支持80多种语言

一个实用型 OCR,支持 80 多种语言和所有流行的书写脚本&#xff0c;包括&#xff1a;拉丁文、中文、阿拉伯文、梵文、西里尔文等。 特点 支持本地或云/API部署 准确度提高到 99% 以上 完全可定制,支持 80 多种语言 支持表格识别 二维码/条码提取识别 GitHub数据 15.7k s…

LAMP下Moodle平台安装

目录 一、虚拟机安装 二、Linux使用ubuntu 三、设置管理员root的密码: 四、注销登录 五、用root账号重新登录 六、安装vmware tools 七、更新系统 八、允许SSH客户端登录 九、实体机中安装远程管理客户端 十、实体机安装文件传输工具 十一、使用Putty登录,安装插件…

学习总结2

第二周总结 一、总结贪吃蛇制作思路 1.绘制API&#xff0c;所以需要引入graphics.h这个图形界面库。 2.游戏规则 蛇是一节一节的&#xff0c;每吃掉一个事物都会长一节蛇吃食物需要移动&#xff0c;如果需要移动那么就会有坐标的变化。蛇没吃掉一个事物都会随机产生一个食物…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Column)

沿垂直方向布局的容器。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含子组件。 接口 Column(value?: {space?: string | number}) 从API version 9开始&#xff0c;该接口…

MySQL 中的自增ID及其应用场景

在MySQL中&#xff0c;自增ID主要体现在几种不同的场景下&#xff0c;每种自增ID都有其特定用途和行为特征&#xff1a; 1. Auto-Increment ID (PRIMARY KEY AUTO_INCREMENT) 场景&#xff1a;在创建表时&#xff0c;可以为某个整数字段设置AUTO_INCREMENT属性&#xff0c;生成…

LeetCode--58

58. 最后一个单词的长度 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大 子字符串 。 示例 1&#xff1a; 输入&#xff1a;s "Hello W…

unity学习(57)——选择角色界面--删除角色2

1.客户端添加点击按钮所触发的事件&#xff0c;在selectMenu界面中增加myDelete函数&#xff0c;当点击“删除角色”按钮时触发该函数的内容。 public void myDelete() {string message nowPlayer.id;//string m Coding<StringDTO>.encode(message);NetWorkScript.get…

Pandas中高效选择和替换操作总结

Pandas是数据操作、分析和可视化的重要工具&#xff0c;有效地使用Pandas可能具有挑战性&#xff0c;从使用向量化操作到利用内置函数&#xff0c;这些最佳实践可以帮助数据科学家使用Pandas快速准确地分析和可视化数据。 图片 在本文中&#xff0c;我们将重点介绍在DataFram…

Docker 学习笔记一

一、什么是docker Docker 是一个基于轻量级虚拟化技术的容器&#xff0c;整个项目基于Go语言开发&#xff1b;Docker是一个C/S架构&#xff0c;后端众多模块各司其职&#xff0c;docker的daemon是运行在主机上通过client可以进行通信。 docker 由三部分组成&#xff1a;镜像(…

使用Seata实现分布式事务真香!

之前分享了六种分布式事务方案&#xff1a; 本地消息表&#xff1a;如何通过本地消息表实现分布式事务 最大努力通知&#xff1a;如何使用最大努力通知实现分布式事务&#xff1f;与本地消息表区别&#xff1f; XA模式&#xff1a;用二阶段三阶段提交实现分布式事务 TCC模式…

【820复试】数据结构面试问题

文章目录 1.用循环比递归的效率高吗2.顺序表和链表的比较3.头指针和头结点的区别4.如何区分循环队列是队满还是队空&#xff1f;5.栈在通过后缀表达式求值的算法思想6.栈在递归中的应用7.队列在层次遍历中的作用8.队列在计算机系统中的应用9.矩阵的压缩存储10.串的模式匹配11.如…

解析编程中不可或缺的基础:深入了解结构体类型

精琢博客&#xff0c;希望可以给大家带来收获~ 博主主页&#xff1a;17_Kevin-CSDN博客 收录专栏&#xff1a;《C语言》 引言 在编程中&#xff0c;结构体是一种自定义的数据类型&#xff0c;它允许开发人员将不同类型的数据组合在一起&#xff0c;并为其定义相关属性和行为。…

服务端出现大量的time_wait,如何排差和解决?

出现大量的TIME_WAIT状态通常是由于网络连接的频繁创建和关闭所导致的。TIME_WAIT状态是TCP连接关闭后的一种状态&#xff0c;在该状态下&#xff0c;连接的端口在一段时间内仍然被保留&#xff0c;以确保延迟的数据包不会在网络中出现问题。 要排查和解决大量的TIME_WAIT状态…

uniapp 跳转返回携带参数(超好用)

天梦星服务平台 (tmxkj.top)https://tmxkj.top/#/ 1.返回界面 uni.$emit(enterPeople, this.entryList)uni.navigateBack({delta: 1}) 2.返回到的界面&#xff08;接收数据界面&#xff09; onShow() {let that thisuni.$on(enterPeople,function(enterPeopledata){console.…