当前位置: 首页 > article >正文

uniapp点击跳转到对应位置

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

<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.kler.cn/a/303998.html

相关文章:

  • [HarmonyOS]简单说一下鸿蒙架构
  • RHCE的学习(16)(shell脚本编程)
  • Debezium日常分享系列之:异步 Debezium 嵌入式引擎
  • Elasticsearch(ES)简介
  • 计算机的错误计算(一百五十二)
  • MySQL如何利用索引优化ORDER BY排序语句
  • 写在OceanBase开源三周年
  • [项目][WebServer][日志设计]详细讲解
  • 【JVM 工具命令】JAVA程序线上问题诊断,JVM工具命令的使用,jstat, jstack,jmap命令的使用
  • 【机器学习】使用Numpy实现神经网络训练全流程
  • 关于若依flowable的安装
  • 76-mysql的聚集索引和非聚集索引区别
  • 为什么网站加载速度总是那么不尽如人意呢?(网站优化篇)
  • 2024.9.14(RC和RS)
  • Docker操作MySQL
  • 互联网环境下CentOS7部署K8S
  • LNMP的简单安装(ubuntu)
  • Artec Leo协助定制维修管道,让石油和天然气炼油厂不停产
  • vue3开发uniapp转字节小程序注意事项
  • 《C++PrimerPlus》第10章:类和对象
  • go语言开发windows抓包工具
  • 在centos上搭建syslog服务端
  • 详情攻略来了!浏览网站记录怎么查?一文读懂这3种实用方法
  • Vue3 响应式工具函数isRef()、unref()、isReactive()、isReadonly()、isProxy()
  • 火焰检测算法、明烟明火检测、烟火检测算法
  • dirty pages , swapiness 查看SWAP占用进程