更新记录
1.0.1(2025-07-01) 下载此版本
更新一下
1.0.0(2025-07-01) 下载此版本
导航栏从悬浮到吸顶
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
try-headerTop
本插件是头部导航的滚动吸顶
这个可以是一个轮播图等展示内容,只要确定好高度就行
<view style="height: 350rpx;padding-top: 200rpx;">
头部内容
</view>
头部导航是左边一个图片或者view文字右边一个输入框组成,输入框可以根据位置调节宽度
背景颜色可以根据需要自行修改
在pages.json中把用导航吸顶的页面的原生导航去掉,
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"enablePullDownRefresh": true,
"navigationStyle": "custom"
}
}
使用说明
<template>
<view class="content">
<headerTop ref="headerTop"></headerTop>
</view>
</template>
<script>
import headerTop from '../../uni_modules/try-headertop/components/try-headertop/try-headertop.vue'
export default {
components: {
headerTop
},
onPageScroll(e) {
this.$refs.headerTop && this.$refs.headerTop.handlePageScroll(e)
},
}
</script>