11// miniprogram_npm/lin-ui/album/index.js
22Component ( {
3- /**
4- * 组件的属性列表
5- */
63 externalClasses : [ 'l-class' , 'l-single-image-class' , 'l-multi-image-class' ] ,
74 properties : {
85 urls : {
@@ -63,42 +60,40 @@ Component({
6360 }
6461 } ,
6562
66- /**
67- * 组件的初始数据
68- */
6963 data : {
7064 // 传值方式是新方式还是旧方式
7165 newType : true ,
7266 // 单图短边大小
7367 shortSideValue : 0 ,
74- // 图片排列几行
75- row : 0 ,
76- // 图片排列几列
77- colum : 0 ,
7868 // 用于显示的图片列表
7969 showUrls : [ ] ,
8070 // 传入的url长度是否大于maxNumber指定的数量
8171 isLong : false ,
8272 } ,
8373
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 ;
9088
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 ) ;
9592 this . setData ( {
9693 isLong : true ,
9794 } ) ;
98- console . warn ( '图片数量超过maxNumber指定数量' ) ;
99- } else {
100- urls = this . data . urls ;
10195 }
96+
10297 this . setData ( {
10398 showUrls : urls
10499 } ) ;
@@ -109,26 +104,22 @@ Component({
109104 this . setData ( {
110105 everyRowNumber : 2
111106 } ) ;
112- } else ( this . setData ( {
107+ } else ( this . setData ( {
113108 everyRowNumber : 3
114109 } ) ) ;
115110 }
116111
117- this . preview ( ) ;
112+ // 判断传入模式
113+ const newType = this . judgeType ( ) ;
114+ this . setData ( {
115+ newType
116+ } ) ;
118117
118+ if ( urls . length === 1 ) {
119+ this . horizontalOrVertical ( newType ? urls [ 0 ] [ key ] : urls [ 0 ] ) ;
120+ }
119121 } ,
120- } ,
121122
122- observers : {
123- 'urls' : function ( ) {
124- this . preview ( ) ;
125- }
126- } ,
127-
128- /**
129- * 组件的方法列表
130- */
131- methods : {
132123 // 判断传入的urls是字符串列表(old模式)还是对象列表(new模式)
133124 judgeType ( ) {
134125 const urls = this . data . urls ;
@@ -156,22 +147,6 @@ Component({
156147 } ) ;
157148 } ,
158149
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-
175150 onPreviewTap ( e ) {
176151 const index = e . currentTarget . id ;
177152 let urls ;
@@ -210,6 +185,5 @@ Component({
210185 }
211186 this . triggerEvent ( 'lintap' , detail , option ) ;
212187 }
213-
214188 }
215189} ) ;
0 commit comments