uniapp点击跳转到对应位置

news/2024/12/23 1:20:46/

其实就是标签选择器 获取到对应标签所在的高度,然后用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/news/1527195.html

相关文章

c语言--力扣简单题目(回文链表)讲解

题目如下&#xff1a; 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为 回文链表。 如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true 示例 2&#xff1…

力扣刷题--3033. 修改矩阵【简单】

题目描述 给你一个下标从 0 开始、大小为 m x n 的整数矩阵 matrix &#xff0c;新建一个下标从 0 开始、名为 answer 的矩阵。使 answer 与 matrix 相等&#xff0c;接着将其中每个值为 -1 的元素替换为所在列的 最大 元素。 返回矩阵 answer 。 算法分析 利用max_element…

基于鸿蒙API10的RTSP播放器(四:沉浸式播放窗口)

前言&#xff1a; 典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条&#xff0c;其中状态栏和导航条&#xff0c;通常在沉浸式布局下称为避让区&#xff1b;避让区之外的区域称为安全区。 开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状…

Maven入门学习

maven是一款管理和构建java项目的工具。 1.概述 1.1安装 安装步骤: 1.1.1官网下载apache-maven-3.6.1-bin.zip&#xff0c;解压 apache-maven-3.6.1-bin.zip 。 1.1.2配置本地仓库:修改conf/settings.xml中的<localRepository>为一个指定目录。 <localRepository&g…

华雁智科前端面试题

1. var 变量的提升 题目&#xff1a; var a 1 function fun() {console.log(b)var b 2 } fun() console.log(a) 正确输出结果&#xff1a;undefined、1答错了&#xff0c;给一个大嘴巴子&#xff0c;错误答案输出结果为&#xff1a;2,1 此题主要考察 var 定义的变量&…

基于 PyQt5 和 OpenCV 进行图像处理操作的GUI工具初版

为了实现一个基于 PyQt5 和 OpenCV 的图形用户界面&#xff08;GUI&#xff09;&#xff0c;要求如下&#xff1a; 左边显示加载的图片。 中间提供各种对图片进行处理的操作方法&#xff08;如灰度化、模糊处理等&#xff09;。 右边显示处理后的效果图。 接下来我将详细讲解如…

Ajax 揭秘:异步 Web 交互的艺术

Ajax 揭秘&#xff1a;异步 Web 交互的艺术 一 . Ajax 的概述1.1 什么是 Ajax ?1.2 同步和异步的区别1.3 Ajax 的应用场景1.3.1 注册表单的用户名异步校验1.3.2 内容自动补全 二 . Ajax 的交互模型和传统交互模型的区别三 . Ajax 异步请求 axios3.1 axios 介绍3.1.1 使用步骤3…

三相可控整流电路 (三相半波,三相桥式)

目录 1. 三相半波整流电路 2. 三相桥式全控整流电路 三相可控整流电路利用三相交流电源&#xff0c;通过可控硅&#xff08;晶闸管&#xff09;将交流电整流为直流电。主要有两种常见类型&#xff1a;三相半波整流电路和三相桥式全控整流电路。 1. 三相半波整流电路 三相半波…