更新记录

1.0.0（2021-10-29）

无

平台兼容性

lxm-nav 是uniapp项目通用前端页面框架之一，自定义顶部导航+抽屉菜单+页面跳转。一般是用来做首页模板。

组件名：lxm-nav，版本：1.0.1

首页框架模板：自定义顶部导航连带抽屉菜单导航。

注意事项 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

安装方式

1.本组件符合easycom规范，HBuilderX 3.1.0起，只需将本组件以uni_modules方式导入项目，在页面template中即可直接使用，无需在页面中import和注册components。 2.使用本组件，同时需要导入uni-icons、uni-nav-bar、uni-drawer三个组件。 3.使用本组件，必须关闭默认导航栏。在pages.json文件中设置globalStyle：{"navigationStyle": "custom",}。

基本用法

在 template 中使用组件

<template>
    <view>
    <uni-nav-bar left-icon="bars" @clickLeft="showDrawer" right-icon="info-filled" @clickRight="navigateTo" title="传奇开心果模板"></uni-nav-bar>  <navigator class ="uni-navbar"url="../about/about"></navigator>
    <uni-drawer ref="showRight" mode="right" :mask-click="false">
        <scroll-view style="height: 100%;" scroll-y="true">
            //<button @click="closeDrawer" type="primary">关闭Drawer</button>
            <view v-for="item in 60" :key="item">可滚动内容 {{ item }}</view>
        </scroll-view>
    </uni-drawer>
    </view>
</template>

<script>
    export default {
        methods: {
            showDrawer() {
                this.$refs.showRight.open();
            },
            closeDrawer() {
                this.$refs.showRight.close();
            },
            navigateTo() {              
                //在起始页面跳转到about.vue页面并传递参数
                uni.navigateTo({
                    url: 'about/about?name=传奇开心果模板'
                });
            }

        }
    }
</script

<style>

</style>

API

Drawer Props

Drawer Events

Drawer Methods

NavBar属性说明

插槽说明

开发者使用 NavBar 时，支持向 NavBar 里插入不同内容，以达到自定义的目的。

<uni-nav-bar>
    <view>标题栏</view>
    <view slot="left">left</view>
    <view slot="right">right</view>
</uni-nav-bar>

事件说明