uniapp_navigation_custom's Introduction

uniapp 小程序自定义导航栏

微信小程序自定义导航栏组件，ios与android端都可以和右边的胶囊对齐，使用环境为 uni-app。

如何获取

github仓库: https://github.com/strugglerx/uniapp_navigation_custom

props

参数	描述	类型	默认值
config	配置	object	{title:"",bgcolor:"",type:2,linear:false,transparent:false,fontcolor:"#000",menuIcon:"",menuText:""}
scrollTop	滑动高度	number	0
scrollMaxHeight	滑动最高高度	number	288

如何使用

*.vue

<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="customConduct" :scrollMaxHeight="scrollMaxHeight"/>

	import navigationCustom from "../../components/navigation-custom"
	export default {
		data() {
			return {
				config:{
					title:"我是标题", //title
					bgcolor:"#c1a379", //背景颜色
					// fontcolor:"red", //文字颜色，默认白色
					type:2, //type 1，3胶囊 2，4无胶囊模式
					transparent:true, //是否背景透明 默认白色
					linear:true, //是为开启下滑渐变
					share:true, //是否将主页按钮显示为分享按钮
					// menuIcon:"../static/icon/back_.png", 当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", 当type为3或4的时候icon右边的文字
				},
				scrollTop:0 ,// 当linear为true的时候需要通过onpagescroll传递参数
				scrollMaxHeight:200 //滑动的高度限制，超过这个高度即背景全部显示
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		components:{
			navigationCustom
		},
		methods: {
			//当config type 为 4或者3 的时候 自定义methods
			customConduct(){
				console.log("ssssss")
			}
		}
	}