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>