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>
相关推荐
宇余18 小时前
从 useState 到 URLState:前端状态管理的另一种思路
前端·vue.js
白兰地空瓶18 小时前
🚀 10 分钟吃透 CSS position 定位!从底层原理到避坑实战,搞定所有布局难题
前端·css
T___T19 小时前
Ajax 数据请求详解与实战
javascript·面试
onthewaying19 小时前
在Android平台上使用Three.js优雅的加载3D模型
android·前端·three.js
冴羽19 小时前
能让 GitHub 删除泄露的苹果源码还有 8000 多个相关仓库的 DMCA 是什么?
前端·javascript·react.js
悟能不能悟19 小时前
jsp怎么拿到url参数
java·前端·javascript
程序猿小蒜19 小时前
基于SpringBoot的企业资产管理系统开发与设计
java·前端·spring boot·后端·spring
Mapmost19 小时前
零代码+三维仿真!实现自然灾害的可视化模拟与精准预警
前端
程序猿_极客19 小时前
JavaScript 的 Web APIs 入门到实战全总结(day7):从数据处理到交互落地的全链路实战(附实战案例代码)
开发语言·前端·javascript·交互·web apis 入门到实战
suzumiyahr19 小时前
用awesome-digital-human-live2d创建属于自己的数字人
前端·人工智能·后端