# bz-grid 宫格
# 基本用法
九宫格等布局
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-content">
<view class="demo-title">bz-grid 宫格</view>
<demo-cell subTitle="column 每行多少个">
<bz-grid :column="4">
<view
class="demo-bz-grid-item"
v-for="(item, index) in params.dataList"
:key="`${item}${index}`"
>{{ item }}</view
>
</bz-grid>
</demo-cell>
<demo-cell
title="子项最大宽度"
subTitle="minmax 子项最大宽度"
>
<bz-grid
minmax="80px"
spacingX="10px"
spacingY="10px"
>
<view
class="demo-bz-grid-item"
v-for="(item, index) in params.dataList"
:key="`${item}${index}`"
>{{ item }}</view
>
</bz-grid>
</demo-cell>
</view>
</view>
</template>
<script>
export default {
data() {
return {
params: {
spacingX: '10px',
spacingY: '10px',
minmax: '70px',
dataList: ['头号', '次要', '再次', '新增', '聚合', '明节', '最', '画上', '空白']
}
}
}
}
</script>
<style>
.demo-bz-grid-item {
border: 1px solid #eee;
background: #fff;
text-align: center;
border-radius: 5px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
column 1.0.1 | String | - | - | 每列显示个数(设置该值后，横向间距不生效)； 1.0.2 版本，则不影响横向间距值 |
| spacingX | String | '0' | - | 横向间距 |
| spacingY | String | '0' | - | 纵向间距 |
| minmax | String | '180px' | - | item 可容忍的最小宽度 |
size 1.0.2 | String | - | - | item 固定宽度 |
注意： size、column、minmax 三选一，优先级为 size > column > minmax