更新记录

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>

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
   }
   },