更新记录
0.0.9(2025-09-13)
减少微信组件体积
0.0.8(2025-06-03)
完成head标签
平台兼容性
uni-app(3.99)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ | √ | √ |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
自定义head
兼容微信浏览器自带的head。避免小程序和APP返回监听不统一,微信小程序,ios和android统一监听返回监听;
leo-head 拖拽排序 说明
组件主要针对微信小程序与APP返回监听问题,使用了此插件,页面不可配置onBackPress事件以防失效,应统一使用组件的beforeleave回调函数处理。
leo-head简单DOM,更多请看下方API
- 提供简单的使用示例,更多请查看下方的demo
<!-- beforeleave -->
<leo-head :beforeleave="beforeleave" title="首页" ></leo-head>
export default {
data() {
return {
callback: null, // 用于统一处理返回事件
}
},
methods:{
// 统一处理返回事件,避免小程序和APP返回监听不统一
beforeleave(callback){
// 首次调用uni.navigateBack会触发beforeleave,表示第一次拦截。 如果不调用callback函数,在当前页面触发uni.navigateBack会直接返回;
callback(true); // 传入true表示继续监听返回事件
callback(false); // 传入false表示直接触发返回事件
this.callback = callback; // 可以在其他地方调用callback函数,继续监听返回事件
}
}
}
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| navStyle | 导航栏的样式 对象形式,可以监听滚动慢慢隐藏背景,或者修改样式 | Object | { background: '#fff', color: '#333', fontSize: '40rpx'} |
| showStatusBarHeight | 是否显示状态栏高度 | Boolean | true |
| menuInfo | 小程序胶囊样式 | Object | {} |
| titleStyle | 标题的样式 | Object | {} |
| icon | 是否显示左上角icon | Boolean | true |
| backType | icon 类型 | String | back" |
| title | 标题 默认空 | String | "" |
| iconColor | icon 的颜色 - 默认跟优先根据navStyle的值 | String | navStyle.color || '#333' |
| beforeleave | 自定义返回逻辑--返回时不会立即返回.优先执行逻辑然后使用uni.navigateBack()返回即可 | [Function, Boolean] | false |
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。


收藏人数:
购买普通授权版(
试用
赞赏(0)
下载 588
赞赏 7
下载 11987614
赞赏 1823
赞赏
京公网安备:11010802035340号