Skip to content

Commit 0477364

Browse files
mehaotianmehaotian
committed
update grid 宫格 1.1.8
1 parent 916661b commit 0477364

File tree

7 files changed

+153
-174
lines changed

7 files changed

+153
-174
lines changed

‎src/components/uni-grid-item/uni-grid-item.vue

+10-47
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
<template>
22
<view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item">
3-
<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item__box-square': square, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
3+
<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
44
:style="{ 'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
55
class="uni-grid-item__box" @click="_onClick">
6-
<view class="uni-grid-item__box-item" :class="{'uni-grid-item__box-item-square': square}">
76
<slot />
8-
</view>
97
</view>
108
</view>
119
</template>
@@ -61,50 +59,15 @@
6159
}
6260
6361
.uni-grid-item__box {
64-
/* #ifndef APP-NVUE */
65-
display: flex;
66-
/* #endif */
67-
flex: 1;
68-
position: relative;
69-
flex-direction: row;
70-
align-items: center;
71-
/* #ifdef APP-NVUE */
72-
justify-content: center;
73-
/* #endif */
74-
}
75-
76-
.uni-grid-item__box-item {
77-
/* #ifndef APP-NVUE */
78-
display: flex;
79-
width: 100%;
80-
/* #endif */
81-
position: relative;
82-
flex: 1;
83-
justify-content: center;
84-
flex-direction: column;
85-
align-items: center;
86-
padding: 15px 0;
87-
}
88-
89-
.uni-grid-item__box-item-square {
90-
position: absolute;
91-
top: 0;
92-
bottom: 0;
93-
}
94-
95-
.uni-grid-item--image {
96-
width: 25px;
97-
height: 25px;
98-
}
99-
100-
.uni-grid-item--text {
101-
font-size: $uni-font-size-sm;
102-
margin-top: 5px;
103-
}
104-
105-
.uni-grid-item__box-square {
106-
height: 0;
107-
padding-top: 100%;
62+
/* #ifndef APP-NVUE */
63+
display: flex;
64+
width: 100%;
65+
/* #endif */
66+
position: relative;
67+
flex: 1;
68+
flex-direction: column;
69+
// justify-content: center;
70+
// align-items: center;
10871
}
10972
11073
.uni-grid-item--border {

‎src/components/uni-grid/config.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@
55
"url": "grid",
66
"edition": "1.1.8",
77
"path": "https://ext.dcloud.net.cn/plugin?id=27",
8-
"update_log": "- 修复 正方形宫格在某些平台下显示正常的Bug\n- 修复 不能动态加载宫格的Bug,添加动态加载数据示例"
8+
"update_log": "- 修复 正方形宫格在某些平台下显示正常的Bug\n- 修复 不能动态加载宫格的Bug,添加动态加载数据示例\n- 新增 示例添加角标效果"
99
}

‎src/components/uni-grid/readme.md

+8-36
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,6 @@ export default {
3131
</uni-grid-item>
3232
</uni-grid>
3333

34-
<!-- 添加角标红点 -->
35-
<uni-grid :column="3" :hor="35" :ver="-45">
36-
<uni-grid-item marker="dot">
37-
<text class="text">文本</text>
38-
</uni-grid-item>
39-
<uni-grid-item marker="badge" text="99" type="success">
40-
<text class="text">文本</text>
41-
</uni-grid-item>
42-
<uni-grid-item marker="image" :hor="35" :ver="-45" :img-width="25" src="https://img-cdn-qiniu.dcloud.net.cn/uni-ui/recommend.png">
43-
<text class="text">文本</text>
44-
</uni-grid-item>
45-
</uni-grid>
46-
4734
<!-- 不带边框并矩形显示 -->
4835
<uni-grid :column="3" :show-border="false" :square="false">
4936
<uni-grid-item>
@@ -71,28 +58,13 @@ export default {
7158

7259
**uni-grid 属性说明：**
7360

74-
|属性名 |类型 |默认值 |说明 |
75-
|--- |---- |--- |--- |
76-
|column |Number |3 |每列显示个数 |
77-
|showBorder |Boolean |true |是否显示边框 |
78-
|borderColor|String |#d0dee5|边框颜色 |
79-
|hor |Number |0 |全局 marker 水平方向移动距离 ，起点为中心，负数为左移动，正数为右移动 |
80-
|ver |Number |0 |全局 marker 垂直方向移动距离 ，起点为中心，负数为上移动，正数为下移动 |
81-
|square |Boolean |true |是否方形显示 |
82-
|highlight |Boolean |true |点击背景是否高亮 |
83-
84-
**uni-grid-item 属性说明：**
85-
86-
|属性名 |类型 |默认值 |说明 |
87-
|--- |---- |--- |--- |
88-
|marker |String |- | marker 类型，可选值，dot：圆点；badge：角标；image：图片； 默认不显示 |
89-
|hor |Number |0 | 局部 marker 水平方向移动距离 ，起点为中心，负数为左移动，正数为右移动，可覆盖全局 hor |
90-
|ver |Number |0 | 局部 marker 垂直方向移动距离 ，起点为中心，负数为上移动，正数为下移动，可覆盖全局 ver |
91-
|type |String |- | **marker:badge 下生效** ，marker 显示内容，如果为汉字最多长度最大为1 |
92-
|size |String |normal | **marker:badge 下生效** ，marker 大小，可取值：normal、small |
93-
|inverted |Boolean|false | **marker:badge 下生效** ，marker 是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色 |
94-
|src |String |- | **marker:image 下生效** ，marker 图片地址路径 |
95-
|imgWidth |Number |30 | **marker:image 下生效** ，marker 宽度，高度自适应 |
61+
|属性名 |类型 |默认值 |说明 |
62+
|--- |---- |--- |--- |
63+
|column |Number |3 |每列显示个数 |
64+
|showBorder |Boolean|true |是否显示边框 |
65+
|borderColor|String |#d0dee5|边框颜色 |
66+
|square |Boolean|true |是否方形显示 |
67+
|highlight |Boolean|true |点击背景是否高亮 |
9668

9769
### 事件说明
9870
|事件名 |说明 |返回值 |
@@ -101,7 +73,7 @@ export default {
10173

10274
**Tips**
10375

104-
- marker:dot ， 暂不支持修改大小，和颜色
76+
- 删除组件自带圆点角标效果，完全交给用户实现，示例有简单角标效果实现
10577
- Grid 组件仅在自定义组件模式下支持
10678
- column 属性最大值最好不要超过 5 个，如果超过，注意内容显示
10779
- 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译

‎src/components/uni-grid/uni-grid.vue

+2-12
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,6 @@
2828
type: String,
2929
default: '#e5e5e5'
3030
},
31-
// 全局标记水平方向移动距离 ，起点为中心，负数为左移动，正数为右移动
32-
hor: {
33-
type: Number,
34-
default: 0
35-
},
36-
// 全局标记垂直方向移动距离 ，起点为中心，负数为上移动，正数为下移动
37-
ver: {
38-
type: Number,
39-
default: 0
40-
},
4131
// 是否正方形显示,默认为 true
4232
square: {
4333
type: Boolean,
@@ -88,13 +78,13 @@
8878
.select(`#${this.elId}`)
8979
.boundingClientRect()
9080
.exec(ret => {
91-
this.width = parseInt((ret[0].width-1) / this.column) + 'px'
81+
this.width = parseInt(ret[0].width / this.column) - 1 + 'px'
9282
fn(this.width)
9383
})
9484
// #endif
9585
// #ifdef APP-NVUE
9686
dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
97-
this.width = parseInt((ret.size.width-1) / this.column) + 'px'
87+
this.width = parseInt(ret.size.width / this.column) - 1 + 'px'
9888
fn(this.width)
9989
})
10090
// #endif

‎src/pages/grid/grid.nvue

+76-50
Original file line numberDiff line numberDiff line change
@@ -5,79 +5,74 @@
55
<view class="example-body">
66
<uni-grid :column="3" :highlight="true" @change="change">
77
<uni-grid-item v-for="(item, index) in list" :key="index">
8-
<image :src="item.url" class="image" mode="aspectFill" />
9-
<text class="text">{{ item.text }}</text>
8+
<view class="grid-item-box">
9+
<image :src="item.url" class="image" mode="aspectFill" />
10+
<text class="text">{{ item.text }}</text>
11+
</view>
1012
</uni-grid-item>
1113
</uni-grid>
1214
</view>
13-
<uni-section title="动态加载宫格" type="line"></uni-section>
15+
<uni-section title="动态加载" type="line"></uni-section>
1416
<view class="example-body">
15-
<view v-if="dynamicList.length!==0" class="box">
17+
<view v-if="dynamicList.length!==0" class="grid-dynamic-box">
1618
<uni-grid :column="3" :highlight="true" @change="change">
1719
<uni-grid-item v-for="(item, index) in dynamicList" :key="index">
18-
<image :src="item.url" class="image" mode="aspectFill" />
19-
<text class="text">{{ item.text }}</text>
20+
<view class="grid-item-box" :style="{'backgroundColor':item.color}">
21+
<image :src="item.url" class="image" mode="aspectFill" />
22+
<text class="text">{{ item.text }}</text>
23+
</view>
2024
</uni-grid-item>
2125
</uni-grid>
2226
</view>
2327
<button type="primary" @click="add">点击添加一个宫格</button>
2428
</view>
25-
<uni-section title="无边框（3列）" type="line"></uni-section>
29+
<uni-section title="无边框带角标（3列）" type="line"></uni-section>
2630
<view class="example-body">
2731
<uni-grid :column="3" :show-border="false" :square="false" @change="change">
28-
<uni-grid-item :hor="0" :ver="0" marker="badge" type="error" text="12">
29-
<image class="image" src="/static/c1.png" mode="aspectFill" />
30-
<text class="text">Grid 1</text>
31-
</uni-grid-item>
32-
<uni-grid-item :hor="0" :ver="0" :img-width="30" marker="image">
33-
<image class="image" src="/static/c2.png" mode="aspectFill" />
34-
<text class="text">Grid 2</text>
35-
</uni-grid-item>
36-
<uni-grid-item>
37-
<image class="image" src="/static/c3.png" mode="aspectFill" />
38-
<text class="text">Grid 3</text>
39-
</uni-grid-item>
40-
<uni-grid-item>
41-
<image class="image" src="/static/c4.png" mode="aspectFill" />
42-
<text class="text">Grid 4</text>
43-
</uni-grid-item>
44-
<uni-grid-item>
45-
<image class="image" src="/static/c5.png" mode="aspectFill" />
46-
<text class="text">Grid 5</text>
47-
</uni-grid-item>
48-
<uni-grid-item>
49-
<image class="image" src="/static/c6.png" mode="aspectFill" />
50-
<text class="text">Grid 6</text>
32+
<uni-grid-item v-if="index <6" v-for="(item ,index) in list" :key="index">
33+
<view class="grid-item-box">
34+
<image class="image" :src="item.url" mode="aspectFill" />
35+
<text class="text">{{item.text}}</text>
36+
<view v-if="item.badge" class="grid-dot">
37+
<uni-badge :text="item.badge" :type="item.type" />
38+
</view>
39+
</view>
5140
</uni-grid-item>
5241
</uni-grid>
5342
</view>
5443
<uni-section title="矩形宫格（3列）" type="line"></uni-section>
5544
<view class="example-body">
5645
<uni-grid :column="3" :square="false" :highlight="false" @change="change">
5746
<uni-grid-item v-for="(item, index) in list" :key="index">
58-
<image :src="item.url" class="image" mode="aspectFill" />
59-
<text class="text">{{ item.text }}</text>
47+
<view class="grid-item-box">
48+
<image :src="item.url" class="image" mode="aspectFill" />
49+
<text class="text">{{ item.text }}</text>
50+
</view>
6051
</uni-grid-item>
6152
</uni-grid>
6253
</view>
6354
<uni-section title="边框颜色（4列 无文字）" type="line"></uni-section>
6455
<view class="example-body">
6556
<uni-grid :column="4" border-color="#03a9f4" @change="change">
6657
<uni-grid-item>
67-
<image class="image" src="/static/c1.png" mode="aspectFill" />
68-
<!-- <text class="text">Grid 1</text> -->
58+
<view class="grid-item-box">
59+
<image class="image" src="/static/c1.png" mode="aspectFill" />
60+
</view>
6961
</uni-grid-item>
7062
<uni-grid-item>
71-
<image class="image" src="/static/c2.png" mode="aspectFill" />
72-
<!-- <text class="text">Grid 2</text> -->
63+
<view class="grid-item-box">
64+
<image class="image" src="/static/c2.png" mode="aspectFill" />
65+
</view>
7366
</uni-grid-item>
7467
<uni-grid-item>
75-
<image class="image" src="/static/c3.png" mode="aspectFill" />
76-
<!-- <text class="text">Grid 3</text> -->
68+
<view class="grid-item-box">
69+
<image class="image" src="/static/c3.png" mode="aspectFill" />
70+
</view>
7771
</uni-grid-item>
7872
<uni-grid-item>
79-
<image class="image" src="/static/c4.png" mode="aspectFill" />
80-
<!-- <text class="text">Grid 4</text> -->
73+
<view class="grid-item-box">
74+
<image class="image" src="/static/c4.png" mode="aspectFill" />
75+
</view>
8176
</uni-grid-item>
8277

8378
</uni-grid>
@@ -89,30 +84,40 @@
8984
import uniSection from '@/components/uni-section/uni-section.vue'
9085
import uniGrid from '@/components/uni-grid/uni-grid.vue'
9186
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
87+
import uniBadge from '@/components/uni-badge/uni-badge.vue'
9288
export default {
9389
components: {
9490
uniSection,
9591
uniGrid,
96-
uniGridItem
92+
uniGridItem,
93+
uniBadge
9794
},
9895
data() {
9996
return {
10097
dynamicList: [],
10198
list: [{
10299
url: '/static/c1.png',
103-
text: 'Grid 1'
100+
text: 'Grid 1',
101+
badge: '0',
102+
type: "primary"
104103
},
105104
{
106105
url: '/static/c2.png',
107-
text: 'Grid 2'
106+
text: 'Grid 2',
107+
badge: '1',
108+
type: "success"
108109
},
109110
{
110111
url: '/static/c3.png',
111-
text: 'Grid 3'
112+
text: 'Grid 3',
113+
badge: '99',
114+
type: "warning"
112115
},
113116
{
114117
url: '/static/c4.png',
115-
text: 'Grid 4'
118+
text: 'Grid 4',
119+
badge: '2',
120+
type: "error"
116121
},
117122
{
118123
url: '/static/c5.png',
@@ -142,16 +147,19 @@
142147
let {
143148
index
144149
} = e.detail
145-
uni.showToast({
146-
title: `点击第${index+1}个宫格`,
147-
icon: 'none'
150+
this.list[index].badge && this.list[index].badge++
151+
152+
uni.showToast({
153+
title: `点击第${index+1}个宫格`,
154+
icon: 'none'
148155
})
149156
},
150157
add() {
151158
if (this.dynamicList.length < 9) {
152159
this.dynamicList.push({
153160
url: `/static/c${this.dynamicList.length+1}.png`,
154-
text: `Grid ${this.dynamicList.length+1}`
161+
text: `Grid ${this.dynamicList.length+1}`,
162+
color: this.dynamicList.length % 2 === 0? '#f5f5f5': "#fff"
155163
})
156164
} else {
157165
uni.showToast({
@@ -183,7 +191,25 @@
183191
/* #endif */
184192
}
185193

186-
.box {
194+
.grid-dynamic-box {
187195
margin-bottom: 15px;
188196
}
197+
198+
.grid-item-box {
199+
flex: 1;
200+
// position: relative;
201+
/* #ifndef APP-NVUE */
202+
display: flex;
203+
/* #endif */
204+
flex-direction: column;
205+
align-items: center;
206+
justify-content: center;
207+
padding: 15px 0;
208+
}
209+
210+
.grid-dot {
211+
position: absolute;
212+
top: 5px;
213+
right: 15px;
214+
}
189215
</style>

‎temp/build_ext/components.zip

-1.12 KB
Binary file not shown.

0 commit comments

Comments
 (0)