更新记录

1.0.3(2024-08-07) 下载此版本

修复h5端头部高度异常问题

1.0.2(2024-08-01) 下载此版本

  1. 修复固定头部的时候状态栏高度不正常问题
  2. 增加插槽

1.0.1(2024-07-08) 下载此版本

新增部分属性

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.6 app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

使用方式

  1. 直接使用默认是跟页面布局在同一层没有定位

    <easy-header title="标题标题"></easy-header>
  2. 标题放到了返回箭头的旁边

    <easy-header leftTitle="标题"></easy-header>
  3. 不显示返回箭头(当前页为tabbar的时候)

    <easy-header leftTitle="标题" :backShow="false"></easy-header>
  4. 显示底部边框

    <easy-header leftTitle="标题" :bdShow="false"></easy-header>
  5. 0默认文字图标 黑色 1文字图标白色

    <easy-header leftTitle="标题" themeType="1" :bdShow="false"></easy-header>
  6. 自定义样式 aaaa这个类需要在当前页且style为scoped的时候才会生效

    <easy-header leftTitle="标题" customClass="aaaa" themeType="1" :bdShow="false"></easy-header>
  7. isBlank true 代表只是占位,状态栏的高度那部分

    <easy-header isBlank leftTitle="标题" customClass="aaaa" themeType="1" :bdShow="false"></easy-header>
  8. listenBack 拦截箭头的返回,自定义

    <easy-header isBlank leftTitle="标题" customClass="aaaa" themeType="1" :bdShow="false"></easy-header>
  9. bgOpacity 1背景不透明 0背景透明

    <easy-header :bgOpacity="0" leftTitle="标题" customClass="aaaa" themeType="1" :bdShow="false"></easy-header>
  10. dynamicBg true 监听页面滑动,头部的背景从透明变成白色 需要在当前页面监听生命周期 onPageScroll

    
    <!-- 监听页面的生命周期  跟 created  mounted 同级-->
    onPageScroll(e) {
    uni.$emit('scroll', e.scrollTop)
    }
    <!-- 在页面头部使用 -->
    <easy-header :dynamicBg="true"></easy-header>
11. fixed 固定在头部 不会跟随页面去滚动
12. 插槽  可自定义内容
<input type="text" >

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问