简柏林 / thingskit-app · Files

菜单导航navbar

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

首先安装uview2.0

进入配置您的路径

//不显示首页按钮路径
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="导航栏-自定义左侧按钮事件" 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

小程序预览

参数说明

参数名	说明	是否必填	数据类型	默认
title	导航名称	false	String
isShowTransparentTitle	navbarType等于5透明背景时title是否显示	false	Boolean	true
leftText	左侧文字	false	String
bgColor	背景颜色	false	String	#fff
image	背图图片	false	String
imageMode	背图图片mode	false	String	aspectFill
navbarType	0、默认固定在顶部 1、不固定在顶部 2、自定义点击事件 3、同时显示箭头和去首页按钮 4、不显示左侧内容 5、上拉渐变显示背景色	false	Number	0
isShowLeft	是否显示左侧内容（navbarType=4效果一样）	false	Boolean	true
leftIcon	左侧图标（uview中icon）	false	String	arrow-left
leftIconColor	左边icon颜色	false	String	#303133
scrollTop	滚动条参数	navbarType等于5必填	Number	0
fontColor	导航title颜色	false	String	#303133
titleWidth	导航中间title宽度（rpx）	false	Number	400
fontSize	title文字大小（rpx）	false	Number	30
gradient	渐变背景	false	String
isFillHeight	是否设置防止塌陷高度	false	Boolean	true

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

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