wepy -底部tabar导航效果（三）

1、在wepy中 props传值在WePY中属于父子组件之间传值的一种机制，包括静态传值与动态传值。

2、其用法对应小程序中 properties:{};

import wepy from 'wepy';
export default class Index extends wepy.component {
	data = {
		{
			names: "收到粮田"，
			url: "/pages/index/index",
			icon: "icon-none"
		},
		{
			names: "兑换中心"，
			url: "/pages/store/index",
			icon: "icon-two"
		},
		{
			names: "个人中心"，
			url: "/pages/member/index",
			icon: "icon-threen"
		},
	}
	props = { 
	    state: String 
	}
	methods = {
		navigatorUrl: function() {
			var that = this
			var url = e.currentTarget.dataset.url;
			wx.redirectTo({
				url : url
			})
		}
	}
}

调用组件的页面：

<template>
	<navbar state="0"></navbar>
</template>

import navBar from '../../components/navbar/index'
export default class Index extends wepy.page {
	components = {
		navbar: navBar
	}
}

1、state 等于每个跳转页面id，必须写在其调用该组件的页面中！！！
2、可以利用flex弹性布局

效果图：