沉浸式渐变状态栏 - 更新日志
1.0.2(2023-05-12)
文档更新
1.0.1(2023-05-12)
文档更新
1.0.0(2023-05-11)
沉浸式、渐变状态栏
标准用法
<v-headerview actionBarColor="#fac90f" titleColor="#ffffff" pageTitle='这是标题' >
<template v-slot:title>
<!--这里是标题栏自定义内容,有默认的标题栏 -->
</template>
<template>
<!-- 这里是自定义内容 -->
</template>
</v-headerview>
以下两处一定不能少:
1、页面必须配置无 navigationBar风格,在page.json中的需要使用的页面配置
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
"mp-alipay": {
"transparentTitle": "always",
"titlePenetrate": "YES"
}
}
2、页面script标签中加入方法
//将页面滚动事件传入组件
Scroll(res) {
uni.$emit('Scroll', res.scrollTop);
},
属性说明
属性名称 | 类型 | 默认值 | 属性说明 |
---|---|---|---|
titleColor | String | #000000 | 标题颜色,如'#ffffff',六位,千万别加透明度哦 |
actionBarColor | String | #ffffff | 标题栏颜色,渐变的部分,和↑要求一样 |
pageTitle | String | 标题文字内容 | |
showBackIcon | Boolean | false | 是否显示返回按钮,嫌丑可以自己去源码改 |
customTitle | Boolean | false | 是否自定义标题栏,传true,即显示插值slot v-slot:title的内容 |
titleCenter | Boolean | false | 标题是否居中,默认在左边 |