更新记录
0.0.9(2025-09-13) 下载此版本
减少微信组件体积
0.0.8(2025-06-03) 下载此版本
完成head标签
平台兼容性
uni-app(3.6.9)
| Vue2 | Vue2插件版本 | Vue3 | Vue2插件版本 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | 0.0.8 | √ | 0.0.8 | √ | √ | √ | √ | √ | √ | √ |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
uni-app x(3.7.2)
| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|---|
| - | - | - | - | - | - |
自定义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 |
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。


收藏人数:
下载插件并导入HBuilderX
赞赏(0)
下载 536
赞赏 7
下载 10625210
赞赏 1792
赞赏
京公网安备:11010802035340号