更新记录

2.0.7（2021-05-05）

插件迁移至uni_modeules，功能未改变

2.0.6（2020-10-09）

1. 修复滑动切换时图标颜色不变成白色的问题
2. 新增滑动切换标题，满足滑动显示，滑动隐藏，滑动切换

   
   // title 属性的四种使用方式
   // 第一种方式
   config:{ title: '这里是新疆' }

// 第二种 config:{ title: ['这里是新疆', '大美新疆'] }

// 第三种 config:{ title: ['这里是新疆', ''] }

// 第四种 config:{ title: ['', '这里是新疆'] }

2.0.5（2020-09-12）

1. 修复图标不显示问题（应为我的手误吧hxicon字母顺序打反了 --！）
2. 文档完善了以下
3. 添加了 nvue app 编译下自定义字体教程

平台兼容性

hx-navbar 适用于 uni-app 项目的头部导航组件

导航栏组件，主要用于头部导航，组件名：hx-navbar

本组件目前兼容微信小程序、H5、5+APP。

本组件支持模式：

1. 普通固定顶部导航
2. 透明导航
3. 透明固定顶部导航
4. 不固定普通导航
5. 背景颜色线性渐变
6. 滑动显示背景
7. 左、中、右3个插槽；可关闭左右插槽使中间插槽铺满导航，实现高度自定义的导航需求

提示

因为有的用户还在使用v1.0，建议前往v1.0项目示例及文档

QQ交流群 954035921

如有问题可进群发图讨论

使用前提

建议下载 示例项目 运行

uni_modules方式导入的插件无需注册组件即可使用

1. 使用 HBuilderX 导入插件 即可
2. 查看uni_modules和easycom

非uni_modules使用方式注册

页面使用需在 script 中引用组件

import hxNavbar from "@/components/hx-navbar/hx-navbar"
export default {
    components: {hxNavbar}
}

全局使用需在 main.js 中注册组件

import hxNavbar from "./components/hx-navbar/hx-navbar"
Vue.component('hx-navbar',hxNavbar)

滑动切换注意事项

必须使用 ref 和 onPageScroll 事件，否则滑动切换无效

<hx-navbar ref="hxnb" :config="config"/>

export default {
    onPageScroll(e) {
        // 重点，用到滑动切换必须加上
        this.$refs.hxnb.pageScroll(e);
    }
}

属性

基本属性

关于状态栏的属性

// statusBarBackground 多种用法
// 普通用法
statusBarBackground: '#80c54c',
// 滑动后由透明转为有颜色 '#80c54c'
statusBarBackground: ['', '#80c54c'],
// 滑动变色，一种颜色变另一种颜色
statusBarBackground: ['#24bdab','#80c54c'],

插槽属性

可下载项目示例查看

leftButton 和 rightButton 属性

可以设置多个按钮，建议每边不超过3个按钮，带文字的不超过2个按钮，也就是两边总共不超过6个按钮

<hx-navbar ref="hxnb" :config="config" @clickBtn="onClickBtn" />

export default {
        data() {
            return {
                config:{
                    title: '这里是新疆',
                    color: '#ffffff',
                    //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
                    backgroundColor: [1,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],
                    // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
                    slideBackgroundColor: [0,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],
                    // 状态栏 ，数组则为滑动变色
                    statusBarBackground:['','#ffffff'],
                    rightButton:[{
                        key: 'btn1',
                        icon: '',
                        position: 'left'
                    },{
                        key: 'btn2',
                        icon: '',
                        position: 'left'
                    },{
                        key: 'btn3',
                        icon: '',
                        position: 'left'
                    }],
                },
            }
        },
        onPageScroll(e) {
            // 重点，用到滑动切换必须加上
            this.$refs.hxnb.pageScroll(e);
        },
        methods: {
            onClickBtn(data){
                //console.log(data);
                uni.showToast({
                    title: `key为 ${data.key} 的按钮`,
                    icon:'none',
                    duration: 1300
                });
            },
        }
    }

search 属性

设置后 title 将失效

<hx-navbar ref="hxnb" :config="config" @searchConfirm="searchConfirm" @searchClick="searchClick"/>

export default {
        data() {
            return {
                config:{
                    back: false,
                    title: '这里是新疆',
                    color: '#ffffff',
                    search: {
                        value:'',
                        placeholder: '',
                        disabled: false
                    },
                    leftButton:[{
                        key: 'btn1',
                        icon: '',
                        txt: '新疆',
                        position: 'left'
                    }],
                },
            }
        },
        methods: {
            // 当输入完点击完成时触发
            searchConfirm(data){
                //console.log(data.value);
                uni.showToast({
                    title: `输入了${data.value}`,
                    icon:'none',
                    duration: 1300
                });
            },
            // 当点击了搜索框时触发
            searchClick(data){
                uni.showToast({
                    title: `点击了搜索框`,
                    icon:'none',
                    duration: 1300
                });
            },
        }
    }

一些简单使用例子

简单使用

<hx-navbar :config="{title: '这里是新疆'}"/>

<hx-navbar :config="{title: ['这里是新疆', '新疆欢迎你']}"/>

<hx-navbar :config="{title: ['', '这里是新疆']}"/>

<hx-navbar :config="{title: ['这里是新疆', '']}"/>

背景颜色线性渐变、头部固定

<hx-navbar :config="config"/>

export default {
    data() {
        return {
            config:{
                title: '这里是新疆',
                color: '#ffffff',
                //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
                backgroundColor: [1,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],
            }
        }
    }
}

滑动切换背景

<hx-navbar ref="hxnb" :config="config" />

export default {
    data() {
        return {
            config:{
                title: '这里是新疆',
                color: '#ffffff',
                //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
                backgroundColor: [1,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],
                // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
                slideBackgroundColor: [1,['#24bdab','#24bdab','#80c54c','#80c54c']],
            },
        }
    },
    onPageScroll(e) {
        // 重点，用到滑动切换必须加上
        this.$refs.hxnb.pageScroll(e);
    }
}

滑动隐藏背景

<hx-navbar ref="hxnb" :config="config" />

export default {
    data() {
        return {
            config:{
                title: '这里是新疆',
                color: '#ffffff',
                //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
                backgroundColor: [1,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],
                // 滑动屏幕后切换颜色，注意颜色为数组时长度必须一样，还有使用滑动切换必须监听 onPageScroll 事件
                slideBackgroundColor: [0,['#a9a1ff','#6970ff','#ff55ff','#ff9999']],
            },
        }
    },
    onPageScroll(e) {
        // 重点，用到滑动切换必须加上
        this.$refs.hxnb.pageScroll(e);
    }
}

设置背景图

<hx-navbar :config="config" />

export default {
    data() {
        return {
            config:{
                title: '这里是新疆',
                color: '#ffffff',
                // 背景图片（array则为滑动切换背景图，string为单一背景图）
                // backgroundImg: ['/static/xj.jpg','/static/logo.png'],
                backgroundImg: '/static/xj.jpg',
            },
        }
    }
}

滑动切换背景图

<hx-navbar ref="hxnb" :config="config" />

export default {
    data() {
        return {
            config:{
                title: '这里是新疆',
                color: '#ffffff',
                // 背景图片（array则为滑动切换背景图，string为单一背景图）
                backgroundImg: ['/static/xj.jpg','/static/xk.jpg',1,0.4],
            },
        }
    },
    onPageScroll(e) {
        // 重点，用到滑动切换必须加上
        this.$refs.hxnb.pageScroll(e);
    }
}