uniapp组件类型

组件

components

头部组件

uni-base-header

template

<template>
	<view class="container">
		<view class="header">
			<view class="logo">logo</view>
			<view class="search">search</view>
			<view class="menu" v-if="menuShow">menu</view>
		</view>
		<hr>
		<h3>fatherData</h3>
		<view>{{fatherData.a}}</view>
		<view>{{fatherData.b.isShow()}}</view>
		<hr>
		
	</view>
</template>

script

export default {
	name:"uni-base-header",
	props:{
		menuShow:{
			type:Boolean,
			default:true
		},
		Text:{
			type:[Number,String],
			default:''
		},
		swArr:{
			type:Array,
			default:function(){
				return [{name:'开关',value:false}]
			}
		},
		fatherData: {
			type: Object,
			default: function() {
				return {};
			}
		},
		fatherFunction: {
			type: Function,
			default: function() {
				return function() {}
			}
		},
		fatherMethod: {
			type: Function,
			default: function() {
				return function() {}
			}
		}


	},
	mounted() {
		// console.log("父组件data定义的变量包含函数", this.fatherData);
		// console.log("父组件data定义的函数变量", this.fatherFunction);
		// console.log("父组件method定义的函数", this.fatherMethod);
		
	},
	data() {
		return {
			
		};
	}
}

style lang=”scss”

.container{
	padding: 0 20px;
}
.header{
	display: flex;
	justify-content: space-between;
}

尾部组件

uni-base-footer

template

<template>
	<view class="container">
		<view class="footer">
			footer
		</view>
	</view>
</template>

script

export default {
	name:"uni-base-footer",
	data() {
		return {
			
		};
	}
}

.footer{
	position: fixed;
	bottom: 0%;
	left: 0;
	width: 100%;
	padding: 20upx;
	text-align: center;
	background: #666;
	color: #fff;
}

页面

index

template

<template>
	<view class="container">
		<uni-base-header :menuShow="menuShow" :fatherData="fatherData" :fatherFcuntion="fatherFcuntion"></uni-base-header>
		
		<view class="from">
			<input type="text" @focus="focus" @blur="blur"/>
		</view>
		
		<uni-base-footer v-if="showFooter"></uni-base-footer>
	</view>
</template>

script

	components: {
		
	},
	data() {
		return {
			menuShow:true,
			showFooter:true,
			fatherData: {
				a: 1,
				b: {
					isShow: function() {
						console.log("data定义对象属性函数");
					}
				}
			},
			fatherFcuntion: function() {
				console.log("data定义函数变量");
			},
		}
	},
	onLoad() {
		
	},
	methods: {
		focus() {
			this.showFooter = false
		},
		blur(){
			this.showFooter = true
		},
		
	}
}

style lang=”scss”

.container{
	padding: 0 40upx;
}
.from{
	border: 1upx solid #666;
	padding: 0 20upx;
	margin-top: 40upx;
}