1+ // miniprogram_npm/lin-ui/album/index.js
2+ Component ( {
3+ /**
4+ * 组件的属性列表
5+ */
6+ externalClasses : [ 'l-class' , 'l-single-image-class' , 'l-multi-image-class' ] ,
7+ properties : {
8+ urls : {
9+ type : Array
10+ } ,
11+ // 是否可以预览
12+ preview : {
13+ type : Boolean ,
14+ value : true
15+ } ,
16+ gapRow : {
17+ type : Number ,
18+ value : 10 ,
19+ } ,
20+ gapColumn : {
21+ type : Number ,
22+ value : 10 ,
23+ } ,
24+ // 单图时长边大小
25+ singleSize : {
26+ type : Number ,
27+ value : 360 ,
28+ } ,
29+ // 多图时图片边长
30+ multipleSize : {
31+ type : Number ,
32+ value : 158 ,
33+ } ,
34+ // 单图显示模式
35+ singleMode : {
36+ type : String ,
37+ value : 'aspectFit' ,
38+ } ,
39+ // 多图显示模式
40+ multipleMode : {
41+ type : String ,
42+ value : 'aspectFill' ,
43+ } ,
44+ key : {
45+ type : String ,
46+ value : 'url'
47+ }
48+ } ,
49+
50+ /**
51+ * 组件的初始数据
52+ */
53+ data : {
54+ // 传值方式是新方式还是旧方式
55+ newType : true ,
56+ // 单图短边大小
57+ shortSideValue : 0 ,
58+ // 图片排列几行
59+ row : 0 ,
60+ // 图片排列几列
61+ colum : 0 ,
62+ } ,
63+
64+ /**
65+ * 组件的生命周期
66+ */
67+ lifetimes : {
68+ attached ( ) {
69+ // 在组件实例进入页面节点树时执行
70+
71+ //判断传入urls长度
72+ if ( this . data . urls . length > 9 ) {
73+ const urls = this . data . urls . slice ( 0 , 9 ) ;
74+ this . setData ( {
75+ urls
76+ } ) ;
77+ console . warn ( '超过9张图片！' ) ;
78+ }
79+
80+ this . preview ( ) ;
81+
82+ } ,
83+ } ,
84+
85+ /**
86+ * 组件的方法列表
87+ */
88+ methods : {
89+ // 判断传入的urls是字符串列表(old模式)还是对象列表(new模式)
90+ judgeType ( ) {
91+ const urls = this . data . urls ;
92+ if ( urls . length != 0 ) {
93+ if ( typeof ( urls [ 0 ] ) !== 'object' ) {
94+ return false ;
95+ }
96+ }
97+ return true ;
98+ } ,
99+
100+ //判断照片是横屏还是竖屏并计算短边的长度
101+ //如不指定短边的长度，短边会默认显示image组件的长度
102+ horizontalOrVertical : function ( src ) {
103+ wx . getImageInfo ( {
104+ src : src ,
105+ success : ( res ) => {
106+ const longSide = res . width >= res . height ? res . width : res . height ;
107+ const shortSide = res . width >= res . height ? res . height : res . width ;
108+ this . setData ( {
109+ horizontalScreen : res . width >= res . height ? true : false ,
110+ shortSideValue : shortSide * this . data . singleSize / longSide
111+ } ) ;
112+ }
113+ } ) ;
114+ } ,
115+
116+ // 显示图片
117+ preview : function ( ) {
118+ // 判断传入模式
119+ const newType = this . judgeType ( ) ;
120+ this . setData ( {
121+ newType
122+ } ) ;
123+ //显示图片
124+ const urls = this . data . urls ;
125+ const key = this . data . key ;
126+
127+ if ( urls . length == 1 ) {
128+ this . horizontalOrVertical ( newType ? urls [ 0 ] [ key ] : urls [ 0 ] ) ;
129+ }
130+ } ,
131+
132+ onPreviewTap ( e ) {
133+ const index = e . currentTarget . id ;
134+ const urls = this . data . urls ;
135+ let tempFilePath = '' ;
136+ let previewImageList = [ ] ;
137+ const newType = this . data . newType ;
138+ const key = this . data . key ;
139+
140+ if ( newType ) {
141+ tempFilePath = urls [ index ] [ key ] ;
142+ for ( let i = 0 ; i < urls . length ; i ++ ) {
143+ previewImageList . push ( urls [ i ] [ key ] ) ;
144+ }
145+ } else {
146+ tempFilePath = urls [ index ] ;
147+ previewImageList = urls ;
148+ }
149+
150+ let detail = {
151+ index, // 下标
152+ current : urls [ index ] , // 当前显示图片的http链接
153+ all : urls // 需要预览的图片http链接列表
154+ } ;
155+ let option = { } ;
156+ if ( this . data . preview === true ) {
157+ wx . previewImage ( {
158+ current : tempFilePath , // 当前显示图片的http链接
159+ urls : previewImageList // 需要预览的图片http链接列表
160+ } ) ;
161+ }
162+ this . triggerEvent ( 'lintap' , detail , option ) ;
163+ }
164+
165+ }
166+ } ) ;
0 commit comments