沉浸式渐变状态栏 - 更新日志

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 标题是否居中,默认在左边