更新记录

1.0.4（2024-08-06） 下载此版本

1. 完善使用文档

1.0.3（2024-08-06） 下载此版本

1. 完事使用文档

1.0.2（2024-08-06） 下载此版本

1. 修复非微信小程序环境下 展示图标时位置异常

平台兼容性

xm-nav-bar 导航栏

导航栏组件，主要用于头部导航。

一个简单的例子

<template>
    <view class="xm-index">
        <xm-nav-bar title="" :scroll-top="scrollTop" align="left" start-bg-color="#276D2B" end-bg-color="#ffffff"
            ico2n="https://cdn.faysunshine.com/img/xm-logo.jpg-wh80">
            <view :style="`
                border: 1px solid #CCC; 
                width: 100%; 
                border-radius: 100px; 
                color: #666; 
                padding: 5px 10px; 
                background-color: #FFF; 
                font-weight: normal; 
                font-size: 12px;
            `">
                渐变导航栏</view>
        </xm-nav-bar>

        <view>
            <view style="height: 200px; background-color: #276D2B;"></view>
            <view v-for="(item, index) in 150">
                {{ index + 1 }}
            </view>
        </view>
    </view>

</template>
<script>
    export default {
        data() {
            return {
                scrollTop: 0
            }
        },
        onPageScroll({ scrollTop }) {
            this.scrollTop = scrollTop
        }
    }
</script>

属性

props: {
    // 标题
    title: {
        type: String,
        default: '',
    },
    // 标题对齐方式. left, center, right
    align: {
        type: String,
        default: 'center',
    },
    // 阴影方式, 底部阴影shadow-bottom
    shadow: {
        type: String,
        default: 'shadow-bottom',
    },
    // 渐变值, 滚动大于此值, 渐变结束
    gradation: {
        type: Number,
        default: 300,
    },
    // 页面滚动距离
    scrollTop: {
        type: Number,
        default: 0,
    },
    // 渐变开始时默认显示的背景色
    startBgColor: {
        type: String,
        default: '#FF0000',
    },
    // 渐变结束的背景色, 这里需要使用16进制颜色字符串
    endBgColor: {
        type: String,
        default: '#FFFFFF',
    },
    // 左侧图标链接
    icon: {
        type: String,
        default: '',
    },
    // 是否根据渐变动态隐藏icon
    hideIcon: {
        type: Boolean,
        default: true,
    },
    // 是否动态调整标题栏尺寸大小
    dyTitle: {
        type: Boolean,
        default: true,
    },
    // 是否展示返回按钮
    showBack: {
        type: Boolean,
        default: true,
    }
},

事件

@title: 标题点击事件
@icon: 图标点击事件
@back: 返回图标点击事件

插槽

默认插槽, 当title为空时展示