uniapp点击跳转到对应位置

其实就是标签选择器 获取到对应标签所在的高度,然后用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>
相关推荐
夏幻灵31 分钟前
HTML5里最常用的十大标签
前端·html·html5
冰暮流星32 分钟前
javascript之二重循环练习
开发语言·javascript·数据库
Mr Xu_1 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝1 小时前
RBAC前端架构-01:项目初始化
前端·架构
程序员agions1 小时前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发1 小时前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法
2501_915106321 小时前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
程序员猫哥_1 小时前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html
龙飞051 小时前
Systemd -systemctl - journalctl 速查表:服务管理 + 日志排障
linux·运维·前端·chrome·systemctl·journalctl
2501_915106321 小时前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone