当前位置：首页 > news >正文

uniapp 之实现商品详情的锚点跳转（类似京东商品详情-点击顶部按钮跳转的对应的页面的内容区域）

news 2025/8/19 1:27:33

类似京东商品详情-点击顶部详情跳转到页面对应的详情区域，点击评价跳转到页面对应的评价区域等。

照例，先封装方法：

封装方法

util.js

/*** 锚点跳转（如：商品详情页面跳转）* @param {string} targetId 目标id* @param {string} rootId 外层盒子根id*/
export const goByAnchor = (targetId, rootId) => {if (targetId) {uni.createSelectorQuery().select('#' + targetId).boundingClientRect(data => {// 目标位置节点 类或者 iduni.createSelectorQuery().select("#" + rootId).boundingClientRect(res => {// 最外层盒子节点类或者 iduni.pageScrollTo({duration: 300, // 过渡时间　　scrollTop: data.top - res.top - 88, // 到达距离顶部的top值})}).exec()}).exec();} else {uni.pageScrollTo({scrollTop: 0,duration: 300});}
}/*** 获取当前元素的一些info，如：距离顶部的距离*/
export const getElementInfoById = (elementId) => {return new Promise((resolve) => {uni.createSelectorQuery().select('#' + elementId).boundingClientRect(data => {resolve(data)}).exec()})
}

页面调用

<view class="goods-detail" id="goods-detail">
<!-- 顶部导航 -->
<uni-nav-bar left-icon="back" fixed statusBar :border="false" :backgroundColor="navBg" class="custom-nav" @clickLeft="pageBack"><template v-if="navBg == '#fff'"><view class="nav-title flex-around-center"><text :class="{ 'active-nav-title': !navTab }" @click="handleAnchor()">宝贝</text><text :class="{ 'active-nav-title': navTab == 'goodsStand' }" @click="handleAnchor('goodsStand')">规格</text><text :class="{ 'active-nav-title': navTab == 'goodsEvaluation' }" @click="handleAnchor('goodsEvaluation')">评价</text><text :class="{ 'active-nav-title': navTab == 'goodsDetail' }" @click="handleAnchor('goodsDetail')">商品详情</text></view></template>
</uni-nav-bar>
<!-- 其他内容 --><!-- 规格 -->
<view class="goods-stand" id="goodsStand">
<!-- 内容 -->
</view><!-- 评价 -->
<view class="goods-evaluation" id="goodsEvaluation">
<!-- 内容 -->
</view><!-- 商品详情 -->
<view class="img-list" id="goodsDetail">
<!-- 内容 -->
</view></view>

data() {return {navBg: 'rgba(0, 0, 0, .05)', // 顶部导航栏的背景色navTab: '', // 顶部导航的tab标识}
},
// 这里通过页面生命周期监听滚动条的位置，对应的回显高亮tab
onPageScroll(e) {if (e.scrollTop > 0) {this.navBg = '#fff'getElementInfoById('goodsStand').then((res) => {if (res.top < 88) {this.navTab = 'goodsStand'}})getElementInfoById('goodsEvaluation').then((res) => {if (res.top < 88) {this.navTab = 'goodsEvaluation'}})getElementInfoById('goodsDetail').then((res) => {if (res.top < 88) {this.navTab = 'goodsDetail'}})} else {this.navTab = ''this.navBg = 'rgba(0, 0, 0, .05)'}
},
methods: {// 锚点跳转handleAnchor(type) {this.navTab = typegoByAnchor(type, 'goods-detail')},
}