扩展组件（uni-ui）之uni-nav-bar

uni-nav-bar 是 uni-app 的 uni-ui 组件库中的一个导航栏组件，用于在应用中创建自定义的顶部导航栏。这个组件提供了一种简单的方式来实现一个具有标题、按钮和自定义样式的导航栏。

基本用法

在使用 uni-nav-bar 之前，你需要确保已经正确安装了 uni-ui 库，并在页面中引入了 uni-nav-bar 组件。

引入组件

<template>
    <uni-nav-bar title="页面标题" @clickLeft="handleClickLeft" @clickRight="handleClickRight">
        <template v-slot:left>
            <uni-icons type="arrowleft" size="22"></uni-icons>
        </template>
        <template v-slot:right>
            <uni-icons type="search" size="22"></uni-icons>
        </template>
    </uni-nav-bar>
</template>

<script>
    import uniNavBar from '@dcloudio/uni-ui/lib/uni-nav-bar/uni-nav-bar.vue'
    import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
    export default {
        components: { uniNavBar, uniIcons },
        methods: {
            handleClickLeft() {
                console.log('左侧按钮被点击');
            },
            handleClickRight() {
                console.log('右侧按钮被点击');
            }
        }
    }
</script>

属性

• title：导航栏的标题文本。
• leftText：左侧文本按钮的内容。
• rightText：右侧文本按钮的内容。

事件

• clickLeft：点击左侧区域时触发的事件。
• clickRight：点击右侧区域时触发的事件。

示例

在上面的示例中，uni-nav-bar 创建了一个包含标题、左侧返回图标和右侧搜索图标的导航栏。点击这些图标将触发相应的事件。

注意事项

• 通过插槽 left 和 right 可以自定义导航栏的左侧和右侧内容，通常放置图标或文本。
• 可以通过监听 clickLeft 和 clickRight 事件来处理左右两侧按钮的点击操作。
• 导航栏的样式可以通过 CSS 进行自定义，以适应不同的设计需求。

更多关于 uni-nav-bar 组件的使用细节，可以查阅 uni-ui 官方文档 或 uni-ui 库的相关文档。