更新记录

1.0.3（2022-05-26）

1.新增白色背景上拉显示背景色时标题色、左侧图标渐变

1.0.2（2022-01-12）

修改从其他js获取的系统信息，直接组件获取，更加便捷使用

1.0.0（2022-01-10）

导航栏navbar基于uview2.0制作，首次更新，多多支持

平台兼容性

菜单导航navbar

自定义导航，上拉渐变显示背景色，左侧按钮自定义事件，左中右插槽，背景渐变色，支持多平台
如果是第一个页面左侧图标显示去首页按钮（分享的页面左侧图标显示去首页按钮）

进入配置您的路径

//不显示首页按钮路径
const mainPagePath = ['pages/index/index','pages/goods/goods','pages/my/myInfo'];
//返回首页的地址
const homePath = '/pages/index/index';

引入组件

import fNavbar from '@/components/module/f-navbar/f-navbar';

默认导航固定顶部

<f-navbar title="导航栏"></f-navbar>

不固定导航栏

<f-navbar title="不固定导航栏" fontColor="#fff" bgColor="#fe461d" navbarType='1'></f-navbar>

上拉渐变显示navbar背景

<f-navbar title="上拉渐变显示navbar背景" fontColor="#fff" bgColor="#fe461d" :scrollTop="scrollTop" navbarType='5'></f-navbar>

上拉渐变白色背景、文字和左侧图标渐变

<f-navbar title="上拉渐变显示navbar背景" fontColor="#303133" transparentTitleColor="#fff" bgColor="#fff" :scrollTop="scrollTop" navbarType='5'></f-navbar>

自定义左侧按钮事件

<f-navbar title="导航栏-自定义左侧按钮事件" navbarType='2' @leftClick='leftClick'></f-navbar>

自定义左侧插槽slot

<f-navbar title="导航栏-自定义左侧插槽">
    <view class="u-flex" slot="left">
        <u-icon name="map" size="19" color="#fff"></u-icon>
        <view class="actName u-line-1">北京市</view>
    </view>
</f-navbar>

导航背景渐变

<f-navbar title="导航栏-背景渐变" fontColor="#fff" gradient="linear-gradient(-90deg, yellow, red)"></f-navbar>

同时显示返回和去首页按钮

<f-navbar title="导航栏" navbarType='3'></f-navbar>

有不懂的请下载示例，查看pagesDome/navbar/navbar

小程序预览

参数说明

欢迎加入wx群聊，一起交流技术

微信交流群（加我好友备注"进群"）
微信号：wbt10302015