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>
相关推荐
Moonbeam Community1 天前
应用爆发,DeFi先行
javascript·ide·web3·区块链·polkadot
2301_796512521 天前
使用状态管理、持久化存储或者利用现有的库来辅助React Native鸿蒙跨平台开发开发一个允许用户撤销删除的操作
javascript·react native·react.js
全马必破三1 天前
浏览器原理知识点总结
前端·浏览器
零Suger1 天前
React 组件通信
前端·react.js·前端框架
LYFlied1 天前
【每日算法】 LeetCode 394. 字符串解码
前端·数据结构·算法·leetcode·面试·职场和发展
前端不太难1 天前
RN Navigation vs Vue Router 的架构对比
javascript·vue.js·架构
硕子鸽1 天前
UniApp + Dify 实战:详解 SSE 流式响应的解析与前端渲染
前端·uni-app·dify
lxh01131 天前
复原IP地址
前端·数据结构·算法
小白学大数据1 天前
Python 爬虫如何分析并模拟 JS 动态请求
开发语言·javascript·爬虫·python