更新记录

0.0.2（2025-11-06） 下载此版本

1.优化了相同种类的数据未合并的问题 2.优化了H5首页首次渲染时导航栏点击后高亮显示无法切换的问题 3.发现vue2版本微信小程序暂时无法在首页使用，微信小程序其他页面和H5以及APP可以正常使用（暂时无法解决） 4.对数据列表最后一项补了空白高度，在最后一项数据高度不足时可以正确激活导航栏高亮显示和数据列表的标题吸顶 5.优化了数据列表背景色

0.0.1（2025-10-25） 下载此版本

初始化

平台兼容性

uni-app(3.6.12)

使用方法

1. 下载组件，放入项目中任意位置（推荐放在components文件夹下）

2. 引入组件并注册：

   <script>
       import AnchorNav from "你存放该组件的位置";
       export default {
           components: {
               AnchorNav
           },
       }
   </script>

3. 在页面中使用：

   <template>
       <AnchorNav :list="dataList">
           <template #default="{ content }">
               //  自行设置每条数据内容的展示
           </template>
       </AnchorNav>
   </template>

   tip：uniapp的vue2开发环境下，微信小程序不支持作用域插槽，导致该组件在微信小程序首页无法正常显示列表数据，APP和H5以及微信小程序其他页面可正常使用

4. 参数说明： list：数据数组，必传参数，格式为:

   [{
   id: 'id',
   category: '分类名',
   content: '数据内容'
   }]

   除list外，其余参数都非必传，按需求设置即可

   高度相关参数需自带单位，如"100px"、"200rpx"等

   height：组件总高度，默认铺满屏幕；

   headerHeight：上方固定区域高度，如在商城列表中需要在滚动列表上方固定显示轮播图、搜索框等信息时，手动计算上方需要空出的高度传给该参数即可;

   navHeight：左侧导航栏每一项的高度

5. 关于右侧内容的展示，除了吸顶标题，具体内容并没有任何设置，需使用者在父组件插槽自行设置需要展示的数据、样式

6. 组件中使用的scroll-view在非H5端使用平滑过渡动画会导致点击左侧导航栏锚点定位时出现右侧吸顶标题闪烁的情况，因此在非H5端默认关闭平滑过渡动画，如需开启动画，在计算属性computed中将scrollWithAnimation直接设置为return true即可，如下：

   computed: {
   scrollWithAnimation() {
       return true
   }
   },

7. H5端在首页初次渲染时子组件会有重绘bug，会使通过条件判断来给样式增加active激活类失效，导致导航栏切换时高亮显示样式不切换。通过把高亮样式改为行内样式已解决该问题。

   <view v-for="(bar, index) in navList" :key="bar.id" :class="['nav-item']" :style="{
       height: navHeight,
       lineHeight: navHeight,
       background: currentIndex === index ? '#fff' : '',
       fontWeight: currentIndex === index ? 'bold' : ''
     }" @tap="selectBar(index)">

8. 对列表最后一个元素补了空白高度，当最后的元素高度不足时也能撑起页面高度，让导航栏对应选项高亮显示和数据列表的标题吸顶，这会导致页面中存在空白，如果不需要补足高度，删除以下代码即可。

   <!-- 对最后一个元素补足高度 -->
   <view v-if="index===navList.length-1" :style="{height:lastFillHeight+'px'}" />

// 对最后一个元素补空白高度，让标题能够吸顶
const windowHeight = uni.getSystemInfoSync().windowHeight
const lastRect = this.anchorRects[this.anchorRects.length - 1]
this.lastFillHeight = Math.max(0, windowHeight - (lastRect.bottom - lastRect.top))
lastRect.bottom += this.lastFillHeight

9. 有任何问题或改进意见欢迎积极提出！