uniapp点击跳转到对应位置

devtools/2024/9/23 10:23:05/

其实就是标签选择器 获取到对应标签所在的高度,然后用uni.pageScrollTo跳转,这是在正常页面上的跳转,scroll-view中更方便

javascript"><template><view class="product-page"><scroll-view scroll-y="true" class="scroll-view">商品详情内容区域<view class="product-details">商品详情内容</view>点评内容区域<view class="product-reviews">点评内容</view></scroll-view><view class="tabs"><view class="tab" @click="scrollToDetails">详情</view><view class="tab" @click="scrollToReviews">点评</view></view></view>
</template><script>export default {data() {return {// 可以添加其他数据属性};},methods: {scrollToDetails() {uni.pageScrollTo({scrollTop: 0,duration: 300});},scrollToReviews() {uni.createSelectorQuery().select('.product-reviews').boundingClientRect((rect) => {console.log(rect.top)if (rect) {uni.pageScrollTo({scrollTop: rect.top,duration: 300});}}).exec();}}};
</script><style lang="scss">.product-page {position: relative;}.scroll-view {height: 100vh;}.product-details {height: 80vh;}.product-reviews {height: 80vh;}.tabs {position: fixed;bottom: 0;left: 0;right: 0;display: flex;background-color: #fff;border-top: 1px solid #ddd;}.tab {flex: 1;text-align: center;padding: 10px 0;}
</style>

http://www.ppmy.cn/devtools/111996.html

相关文章

JDBC客户端连接Starrocks 2.5

<?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://ma…

电机控制01 - 基础篇

电机控制01 - 基础篇 0. 说在前面的话1.常见电机类型2.电机的主要应用领域3. 电机控制数理理论知识0. 说在前面的话 这段时间开始,我将深入探索BLDC与FOC三相直流无刷电机驱动技术。在创业公司,尤其是对那些尚处于摸索阶段、方向未定的初创企业而言,首要任务是立足当下,于…

ChatGPT在论文写作领域的应用:初稿设计

学境思源&#xff0c;一键生成论文初稿&#xff1a; AcademicIdeas - 学境思源AI论文写作 学术论文写作中&#xff0c;内容清晰、结构合理的初稿至关重要。通过 ChatGPT&#xff0c;写作者可以快速生成内容框架、明确研究问题&#xff0c;并优化表达方式。不仅提高了写作效率&…

IPv6路由基础

RIPng RIPng是一种较为简单的内部网关协议&#xff0c;是RIP在IPv6网络中的应用。RIPng主要用于规模较小的网络中&#xff0c;比如校园网以及结构较简单的地区性网络。由于RIPng的实现较为简单&#xff0c;在配置和维护管理方面也远比OSPFv3和IS-IS for IPv6容易&#xff0c;因…

设计模式 桥接模式(Bridge Pattern)

文章目录 桥接模式简绍桥接模式的核心概念包括以下几个部分&#xff1a;桥接模式的工作流程桥接模式优缺点桥接模式优点桥接模式缺点 UML图代码示例适用场景 桥接模式简绍 桥接模式&#xff08;Bridge Pattern&#xff09;是对象结构型设计模式中的一种&#xff0c;它将抽象与…

c#中的版本管理和描述

StringBuilder sb new StringBuilder(); sb.Append("1、开发框架选型&#xff0c;编程语言选型和开发控件选型&#xff0c;基础框架搭建"); sb.Append(Environment.NewLine); sb.Append("2、测试环境数据库中版本表结构和账号表结构设计&#xff1b;"); …

系统架构设计师教程 第5章 5.2需求工程 笔记

5.2 需求工程 ★★★★★ 软件需求是指用户对系统在功能、行为、性能、设计约束等方面的期望。 软件需求包括3个不同的层次&#xff1a;业务需求、用户需求和功能需求(也包括非功能需求)。 (1)业务需求 (business requirement) 反映了组织机构或客户对系统、产品高层次的目标…

【C++】vector和list的区别

1. vector vector和数据类似&#xff0c;拥有一段连续的内存空间&#xff0c;并且起始地址不变vector能高效的进行随机存取&#xff0c;时间复杂度为o(1)因为vector内存空间是连续的&#xff0c;所以在进行插入和删除操作时&#xff0c;会造成内存块的拷贝&#xff0c;时间复杂…