uniapp导航栏按钮全局方法-猿码集

1. 什么是uniapp导航栏按钮全局方法

在uniapp框架中，导航栏上的按钮是我们经常需要使用的功能，比如返回按钮、分享按钮等等。为了提高开发效率，我们可以使用uniapp提供的导航栏按钮全局方法，来快速添加和操作导航栏按钮。这些方法可以在页面中共享使用，而不需要在每个页面中单独添加和设置导航栏按钮。

Uniapp提供的导航栏按钮全局方法有两个，分别是：uni.setNavigationBarLeftButton()和uni.setNavigationBarRightButton()。它们的作用是设置导航栏左侧和右侧按钮。

接下来，我们将会详细介绍这两个方法的使用方法和常见场景。

2. uni.setNavigationBarLeftButton()方法详解

2.1 方法说明

uni.setNavigationBarLeftButton()方法用于设置导航栏左侧按钮，它的语法如下：

uni.setNavigationBarLeftButton({
    index: 0,
    text: '',
    iconPath: '',
    onTap: function() { },
    success: function(res) { },
    fail: function(res) { }
})

其中，各个参数的含义如下：

index: 按钮的位置，从左往右数，从0开始计数

text: 按钮上显示的文本内容

iconPath: 按钮上显示的图标路径

onTap: 按钮点击事件的回调函数

success: 设置成功的回调函数

fail: 设置失败的回调函数

2.2 示例代码

下面是一个简单的示例代码，用于设置导航栏左侧返回按钮：

uni.setNavigationBarLeftButton({
    index: 0,
    text: '',
    iconPath: '/static/img/back.png',
    onTap: function() {
        uni.navigateBack({
            delta: 1
        });
    }
})

在这个示例中，我们设置了左侧按钮的位置为0，显示的图标是一个返回图标，点击后会调用uni.navigateBack()方法返回上一页。

3. uni.setNavigationBarRightButton()方法详解

3.1 方法说明

uni.setNavigationBarRightButton()方法用于设置导航栏右侧按钮，它的语法与uni.setNavigationBarLeftButton()方法相似，如下所示：

uni.setNavigationBarRightButton({
    index: 0,
    text: '',
    iconPath: '',
    onTap: function() { },
    success: function(res) { },
    fail: function(res) { }
})

各个参数的含义也与uni.setNavigationBarLeftButton()方法相同，这里不再赘述。

3.2 示例代码

下面是一个简单的示例代码，用于设置导航栏右侧分享按钮：

uni.setNavigationBarRightButton({
    index: 0,
    text: '',
    iconPath: '/static/img/share.png',
    onTap: function() {
        // 执行分享操作
    }
})

在这个示例中，我们设置了右侧按钮的位置为0，显示的图标是一个分享图标，点击后将会执行分享操作。

4. 常见场景

4.1 带参数跳转页面并传递参数

在实际开发中，我们经常需要在页面跳转时传递参数。可以使用uniapp提供的参数传递方式来实现，同时结合导航栏按钮全局方法，可以实现带参跳转页面并传递参数。

假设我们要从当前页面跳转到目标页面，并传递一个参数userId。那么，我们可以在当前页面中设置右侧按钮，点击时跳转到目标页面并传递userId参数，示例代码如下：

uni.setNavigationBarRightButton({
    index: 0,
    text: '跳转',
    onTap: function() {
        uni.navigateTo({
            url: '/pages/targetPage/targetPage?userId=123'
        });
    }
})

在目标页面中，我们可以通过以下代码获取到参数并进行相关操作，示例代码如下：

export default {
    onLoad: function(options) {               
        let userId = options.userId;
        // 进行相关操作
    }
}

4.2 常用通用图标集成

在导航栏按钮中，我们通常会用到一些常用的通用图标，例如返回图标、分享图标等。在uniapp框架中，我们可以将这些通用图标集成到项目中，以便全局使用。

集成通用图标需要将图标文件放到项目的static目录下，然后就可以在导航栏按钮的iconPath属性中使用了。

4.3 统一样式调整

在开发多个页面时，我们经常需要对导航栏按钮进行统一样式调整。可以通过设置全局样式来实现。

在App.vue文件中，可以添加以下代码来设置全局导航栏按钮样式：

export default {
    onLaunch: function () {
        uni.setNavigationBarColor({
            frontColor: '#000000',
            backgroundColor: '#ffffff',
            animation: {
                duration: 200,
                timingFunc: 'easeIn'
            }
        });
        uni.setNavigationBarLeftButton({
            index: 0,
            iconPath: '/static/img/back.png',
            onTap: function() {
                uni.navigateBack({
                    delta: 1
                });
            }
        });
        uni.setNavigationBarRightButton({
            index: 0,
            iconPath: '/static/img/share.png',
            onTap: function() {
                // 执行分享操作
            }
        });
    }
}

在这个示例中，我们设置了导航栏按钮的背景颜色为白色，文字颜色为黑色，并统一设置了返回按钮和分享按钮的图标和点击事件。

5. 总结

uniapp提供了导航栏按钮全局方法，可以极大地提高开发效率，避免了在每个页面上单独设置导航栏按钮的繁琐工作。

通过本文的介绍，相信您已经了解了uni.setNavigationBarLeftButton()和uni.setNavigationBarRightButton()方法的使用方法和常见场景。希望本文对您有所帮助，欢迎关注更多uniapp开发技术文章。

uniapp导航栏按钮全局方法