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>
相关推荐
百***354821 分钟前
JavaScript在Node.js中的集群部署
开发语言·javascript·node.js
光影少年23 分钟前
node.js和nest.js做智能体开发需要会哪些东西
开发语言·javascript·人工智能·node.js
华仔啊27 分钟前
图片标签用 img 还是 picture?很多人彻底弄混了!
前端·html
lichong95133 分钟前
XLog debug 开启打印日志,release 关闭打印日志
android·java·前端
南山安35 分钟前
栈(Stack):从“弹夹”到算法面试题的进阶之路
javascript·算法·面试
烟袅1 小时前
作用域链 × 闭包:三段代码,看懂 JavaScript 的套娃人生
前端·javascript
San30.1 小时前
深入理解 JavaScript 异步编程:从 Ajax 到 Promise
开发语言·javascript·ajax·promise
风止何安啊1 小时前
收到字节的短信:Trae SOLO上线了?尝尝鲜,浅浅做个音乐播放器
前端·html·trae
抱琴_1 小时前
大屏性能优化终极方案:请求合并+智能缓存双剑合璧
前端·javascript
用户463989754321 小时前
Harmony os——长时任务(Continuous Task,ArkTS)
前端