关于u-row 和u-col

使用方法

<u-row gutter="16" justify="center">
	<u-col span="3">
		<view class="demo-layout bg-purple"></view>
	</u-col>
	<u-col span="3" offset="6">
		<view class="demo-layout bg-purple-light"></view>
	</u-col>
</u-row>

可以传入gutter 和justify
在u-col 里面传入 span 和offset

  1. 传入justify 进行一系列的处理
  2. 因为在style 无法使用 - 方法
	:style="{
   		alignItems: uAlignItem,
   		justifyContent: uJustify
   	}"
   	//使用计算属性计算uJustify如果是start的话,就加上**flex-**。如果是
   //	space-aroundt的话,是加上了 **space -** 
   	uJustify() {
   			if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
   			else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
   			else return this.justify;
   		},
   	```
   	在col 中sapn和offset的原理是flex 的百分比和marginLeft
<view class="u-col" :class="[
   	'u-col-' + span
   ]" :style="{
   	padding: `0 ${Number(gutter)/2 + 'rpx'}`,
   	marginLeft: 100 / 12 * offset + '%',
   	flex: `0 0 ${100 / 12 * span}%`,
   	alignItems: uAlignItem,
   	justifyContent: uJustify,
   	textAlign: textAlign
   }"
    @tap="click">
   	<slot></slot>
   </view>
如何获取父组件中的gutter 属性呢?
由于u-row 不一定是直接父组件并且支付宝小程序中不支持provide和inject的写法
所以采用了while循环

重点

export default function $parent(name = undefined) {
let parent = this.$parent;
// 通过while历遍,这里主要是为了H5需要多层解析的问题

while (parent) {
	// 父组件
	if (parent.$options && parent.$options.name !== name) {
		// 如果组件的name不相等,继续上一级寻找
		parent = parent.$parent;
	} else {
		return parent;
	}
}
return false;

}

	调用
	this.parent = this.$u.$parent.call(this, 'u-row');	
	只要找到父组件的name 属性为`**u-row**`的
//	call 是为了里面的this  指向自身
	this.gutter = this.parent.gutter;

通过此处案列,学会了
通过只传入一个justify 来进行不同的适配
flex的百分比写法 (span)
calc比例写法
.u-col-5 {
width: calc(100%/12 * 5);
}
查询父组件或者祖父组件的属性值

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值