1
1
// miniprogram_npm/lin-ui/album/index.js
2
2
Component ( {
3
- /**
4
- * 组件的属性列表
5
- */
6
3
externalClasses : [ 'l-class' , 'l-single-image-class' , 'l-multi-image-class' ] ,
7
4
properties : {
8
5
urls : {
@@ -63,42 +60,40 @@ Component({
63
60
}
64
61
} ,
65
62
66
- /**
67
- * 组件的初始数据
68
- */
69
63
data : {
70
64
// 传值方式是新方式还是旧方式
71
65
newType : true ,
72
66
// 单图短边大小
73
67
shortSideValue : 0 ,
74
- // 图片排列几行
75
- row : 0 ,
76
- // 图片排列几列
77
- colum : 0 ,
78
68
// 用于显示的图片列表
79
69
showUrls : [ ] ,
80
70
// 传入的url长度是否大于maxNumber指定的数量
81
71
isLong : false ,
82
72
} ,
83
73
84
- /**
85
- * 组件的生命周期
86
- */
87
- lifetimes : {
88
- attached ( ) {
89
- // 在组件实例进入页面节点树时执行
74
+ observers : {
75
+ 'urls' : function ( ) {
76
+ this . init ( ) ;
77
+ }
78
+ } ,
79
+
80
+ methods : {
81
+
82
+ /**
83
+ * 在 urls 数据变化后进行初始化
84
+ */
85
+ init ( ) {
86
+ // 取出参数
87
+ let { urls, maxNumber, key} = this . data ;
90
88
91
- //判断传入urls长度
92
- let urls = [ ] ;
93
- if ( this . data . urls . length > this . data . maxNumber ) {
94
- urls = this . data . urls . slice ( 0 , this . data . maxNumber ) ;
89
+ // 如果 urls 长度超出指定图片数量,则将其截断
90
+ if ( urls . length > maxNumber ) {
91
+ urls = urls . slice ( 0 , maxNumber ) ;
95
92
this . setData ( {
96
93
isLong : true ,
97
94
} ) ;
98
- console . warn ( '图片数量超过maxNumber指定数量' ) ;
99
- } else {
100
- urls = this . data . urls ;
101
95
}
96
+
102
97
this . setData ( {
103
98
showUrls : urls
104
99
} ) ;
@@ -109,26 +104,22 @@ Component({
109
104
this . setData ( {
110
105
everyRowNumber : 2
111
106
} ) ;
112
- } else ( this . setData ( {
107
+ } else ( this . setData ( {
113
108
everyRowNumber : 3
114
109
} ) ) ;
115
110
}
116
111
117
- this . preview ( ) ;
112
+ // 判断传入模式
113
+ const newType = this . judgeType ( ) ;
114
+ this . setData ( {
115
+ newType
116
+ } ) ;
118
117
118
+ if ( urls . length === 1 ) {
119
+ this . horizontalOrVertical ( newType ? urls [ 0 ] [ key ] : urls [ 0 ] ) ;
120
+ }
119
121
} ,
120
- } ,
121
122
122
- observers : {
123
- 'urls' : function ( ) {
124
- this . preview ( ) ;
125
- }
126
- } ,
127
-
128
- /**
129
- * 组件的方法列表
130
- */
131
- methods : {
132
123
// 判断传入的urls是字符串列表(old模式)还是对象列表(new模式)
133
124
judgeType ( ) {
134
125
const urls = this . data . urls ;
@@ -156,22 +147,6 @@ Component({
156
147
} ) ;
157
148
} ,
158
149
159
- // 显示图片
160
- preview : function ( ) {
161
- // 判断传入模式
162
- const newType = this . judgeType ( ) ;
163
- this . setData ( {
164
- newType
165
- } ) ;
166
- //显示图片
167
- const urls = this . data . urls ;
168
- const key = this . data . key ;
169
-
170
- if ( urls . length === 1 ) {
171
- this . horizontalOrVertical ( newType ? urls [ 0 ] [ key ] : urls [ 0 ] ) ;
172
- }
173
- } ,
174
-
175
150
onPreviewTap ( e ) {
176
151
const index = e . currentTarget . id ;
177
152
let urls ;
@@ -210,6 +185,5 @@ Component({
210
185
}
211
186
this . triggerEvent ( 'lintap' , detail , option ) ;
212
187
}
213
-
214
188
}
215
189
} ) ;
0 commit comments