FixedNav 悬浮导航

参考 NutUI fixednav 示例，支持右侧、左侧、无遮罩与自定义按钮/列表。

演示

9:41

代码示例

<!-- 事件日志 -->
  <re-fixed-nav class="demo-default" :visible="visible" activeText="基础用法" :position="{ top: '88px' }" :navList="navList" @update:visible="visible = $event" @selected="onSelected('基础用法', $event)" />
  <re-fixed-nav class="demo-left" :visible="visibleLeft" type="left" activeText="左侧收起" unActiveText="左侧展开" :position="{ top: '168px' }" :navList="navList" @update:visible="visibleLeft = $event" @selected="onSelected('左侧示例', $event)" />
  <re-fixed-nav class="demo-no-overlay" :visible="visiblePlain" :position="{ top: '248px' }" :overlay="false" activeText="无遮罩" :navList="navList" @update:visible="visiblePlain = $event" @selected="onSelected('无遮罩示例', $event)" />
  <re-fixed-nav class="demo-custom" :visible="customVisible" type="left" :position="{ top: '328px' }" @update:visible="customVisible = $event" > <template #list> <view v-if="customVisible" class="demo-custom-list"> <view class="demo-custom-item" @click="onCustomSelect('快捷入口 1')"><text class="demo-custom-item__text">1</text></view> <view class="demo-custom-item" @click="onCustomSelect('快捷入口 2')"><text class="demo-custom-item__text">2</text></view> <view class="demo-custom-item" @click="onCustomSelect('快捷入口 3')"><text class="demo-custom-item__text">3</text></view> <view class="demo-custom-item" @click="onCustomSelect('快捷入口 4')"><text class="demo-custom-item__text">4</text></view> <view class="demo-custom-item" @click="onCustomSelect('快捷入口 5')"><text class="demo-custom-item__text">5</text></view> </view> </template> <template #btn> <text class="demo-custom-btn__icon">↻</text> <text class="demo-custom-btn__text">{{ customVisible ? '自定义开' : '自定义关' }}</text> </template> </re-fixed-nav>

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-fixed-nav />。

API

FixedNav Props

名称类型默认值描述必传
showbooleantrue-N
visiblebooleanfalse-N
navListArray<any>() : Array<any> => as Array<any>-N
activeColorstring''-N
activeTextstring''-N
unActiveTextstring''-N
typestring'right'-N
overlaybooleantrue-N
positionPositionOptions() : PositionOptions => ({-N
bottomnumber--N
customStylestring-自定义样式N

FixedNav Events

名称参数描述
update:visiblevalue: boolean显隐变化时触发
selecteddetail: UTSJSONObject选中时触发
selectitem: any, index: number选择时触发
changeindex: number值变化时触发

FixedNav Slots

名称描述
default默认插槽
BackTop 返回顶部
参考 uniapp-components 的 BackTop 交互，只保留一个实际可用的返回顶部实例，通过按钮切换当前样式并在长内容区域里验证显隐与回顶。
Indexes 索引
索引列表：数据驱动 + 分组锚点，右侧字母点击 / 拖动可跳转定位并滚动高亮联动。吸顶由原生 sticky-header 提供（App / H5），微信小程序 WebView 暂不吸顶。点击组件类型或打开按钮，以全屏弹层体验真实交互。