更新记录

1.0.2（2024-12-17） 下载此版本

更新使用文档，添加插槽说明

1.0.0（2024-12-17） 下载此版本

完成自适应导航栏对机型的适配

平台兼容性

使用说明

props

插槽

具名插槽box，只能通过该插槽设置导航栏

使用demo

通过easycom导入

{
   "easycom": {
        "autoscan": true,
        "custom": {
            "^my-(.*)": "@/uni_modules/components/my-$1/my-$1.vue"
        }
    },
   "pages":[
       //你的页面配置
   ]
}

组件目录创建

在根目录下创建components/my-nav/my-nav.vue

使用组件

<template>
    <my-nav :isTest="true">
        <template #box>
            <view class="box">
                <view class="nav-left">左边</view>
                <view class="title">标题</view>
            </view>
        </template>
    </my-nav>
</template>

<script setup>
import {ref} from "vue"

let bg=ref('#e6b4b4')
</script>

<style lang="scss" scoped>
.box{
    width: 750rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .nav-left{
        position: absolute;
        left: 36rpx;
    }

    .nav-right{
        width: 40px;
        height: 40px;
        background: red;
        margin-left: 25rpx;
    }
}
</style>