更新记录

1.0.0（2024-01-19） 下载此版本

动态显示导航栏，屏幕向下滑动，显示导航栏

平台兼容性

uni-app

动态显示导航栏

注册组件后直接使用，支持自定义内容。

使用方式

import trainShowHead from '@/components/train-showhead/train-showhead.vue'

pages.json文件 navigationStyle 项 设置为 "navigationStyle": "custom"

"pages": [https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationStyle": "custom"
            }
        }
    ],

在页面中使用组件

<template>
    <view class="">     
        <trainShowHead
        title='邀请好友'
        defaultColor='#fff'
        isShowGoBack='true'
        >
            <view class="item_content">
                <view class="info"> 
                    可根据自己的项目-自定义内容
                </view>
            </view>
        </trainShowHead>
    </view>
</template>

<script>
    import trainShowHead from '@/components/train-showhead/train-showhead.vue'
    export default {
        components: {
            trainShowHead
        },
        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .item_content{
        height: 3000rpx;
        background-color: #55aaff;
        .info{
            padding-top: 500rpx;
            font-size: 40rpx;
            text-align: center;
            color: #fff;
        }
    }
</style>

效果演示