uniapp中页面滚动锚点位置及滚动到对应高度显示对应按钮

最新推荐文章于 2024-12-14 11:30:36 发布

原创

最新推荐文章于 2024-12-14 11:30:36 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #开发语言

文章介绍了如何在Vue项目中使用页面代码和组件代码，实现页面滚动时顶部导航栏的动态吸顶效果，以及通过Tab组件和事件传递实现不同区域的切换。

在这里插入图片描述

可以把页面代码和组件代码放自己项目里跑一下

页面代码

<template>
  <view class="Tracing-detail">
    
    <view class="title" v-for="i in 30">顶部信息</view>
    <!-- tab按钮 -->
    <Tab v-model="activeIndex" @change="scrollToTarget"></Tab>
    <!-- 产品详情 -->
    <view class="cpxq" id="cpxq">
      <view class="title" v-for="i in 30">产品详情</view>
    </view>
    <!-- 流程溯源 -->
    <view class="lcsy" id="lcsy">
      <view class="title" v-for="i in 30">流程溯源</view>
    </view>
    <!-- 主体信息 -->
    <view class="ztxx" id="ztxx">
      <view class="title" v-for="i in 30">主体信息</view>
    </view>
    <