Skip to content

Commit 23f68e2

Browse files
zhc525349965zhc525349965
committed
feat:优化wxml文件，新增可选key配置
1 parent 46bad32 commit 23f68e2

File tree

13 files changed

+325
-105
lines changed

13 files changed

+325
-105
lines changed

‎dist/album/index.js‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ Component({
4040
multipleMode: {
4141
type: String,
4242
value: 'aspectFill',
43+
},
44+
key: {
45+
type: String,
46+
value: 'url'
4347
}
4448
},
4549

@@ -48,28 +52,32 @@ Component({
4852
*/
4953
data: {
5054
// 传值方式是新方式还是旧方式
51-
newOrOld: null,
55+
newType: true,
5256
// 单图短边大小
5357
shortSideValue: 0,
58+
// 图片排列几行
59+
row: 0,
60+
// 图片排列几列
61+
colum: 0,
5462
},
5563

5664
/**
5765
* 组件的生命周期
5866
*/
5967
lifetimes: {
60-
attached: function () {
68+
attached() {
6169
// 在组件实例进入页面节点树时执行
6270

6371
//判断传入urls长度
6472
if (this.data.urls.length > 9) {
65-
const urls = this.data.urls.slice(0, 9);
73+
const urls = this.data.urls.slice(0, 9)
6674
this.setData({
6775
urls
68-
});
76+
})
6977
console.warn('超过9张图片！');
7078
}
7179

72-
this.preview();
80+
this.preview()
7381

7482
},
7583
},
@@ -79,29 +87,27 @@ Component({
7987
*/
8088
methods: {
8189
// 判断传入的urls是字符串列表(old模式)还是对象列表(new模式)
82-
judgeNewOrOld: function () {
90+
judgeType() {
8391
const urls = this.data.urls;
8492
if (urls.length != 0) {
85-
if (typeof (urls[0]) != 'object') {
86-
return 'old';
93+
if (typeof (urls[0]) !== 'object') {
94+
return false;
8795
}
88-
return 'new';
8996
}
90-
return 'new';
97+
return true;
9198
},
9299

93100
//判断照片是横屏还是竖屏并计算短边的长度
94101
//如不指定短边的长度，短边会默认显示image组件的长度
95102
horizontalOrVertical: function (src) {
96-
let that = this;
97103
wx.getImageInfo({
98104
src: src,
99-
success(res) {
105+
success: (res) => {
100106
const longSide = res.width >= res.height ? res.width : res.height;
101107
const shortSide = res.width >= res.height ? res.height : res.width;
102-
that.setData({
103-
horizontal_screen: res.width >= res.height ? true : false,
104-
shortSideValue: shortSide * that.data.singleSize / longSide
108+
this.setData({
109+
horizontalScreen: res.width >= res.height ? true : false,
110+
shortSideValue: shortSide * this.data.singleSize / longSide
105111
});
106112
}
107113
});
@@ -110,16 +116,16 @@ Component({
110116
// 显示图片
111117
preview: function () {
112118
// 判断传入模式
113-
const newOrOld = this.judgeNewOrOld();
119+
const newType = this.judgeType();
114120
this.setData({
115-
newOrOld
121+
newType
116122
});
117-
118123
//显示图片
119124
const urls = this.data.urls;
125+
const key = this.data.key
120126

121127
if (urls.length == 1) {
122-
this.horizontalOrVertical(newOrOld == 'new' ? urls[0].url : urls[0]);
128+
this.horizontalOrVertical(newType ? urls[0][key] : urls[0]);
123129
}
124130
},
125131

@@ -128,17 +134,17 @@ Component({
128134
const urls = this.data.urls;
129135
let tempFilePath = '';
130136
let previewImageList = [];
131-
const newOrOld = this.data.newOrOld;
137+
const newType = this.data.newType;
138+
const key = this.data.key
132139

133-
if (newOrOld == 'old') {
134-
tempFilePath = urls[index];
135-
previewImageList = urls;
136-
137-
} else {
138-
tempFilePath = urls[index].url;
140+
if (newType) {
141+
tempFilePath = urls[index][key];
139142
for (let i = 0; i < urls.length; i++) {
140-
previewImageList.push(urls[i].url);
143+
previewImageList.push(urls[i][key]);
141144
}
145+
} else {
146+
tempFilePath = urls[index];
147+
previewImageList = urls;
142148
}
143149

144150
let detail = {

‎dist/album/index.wxml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<!-- miniprogram_npm/lin-ui/picture-album/index.wxml -->
2-
<view class="container l-class" style="{{urls.length == 2 || urls.length == 4?'width:'+(2*multipleSize+gapRow)+'rpx;':'width:'+(3*multipleSize+ 2 *gapRow)+'rpx;'}} grid-row-gap:{{gapColumn}}rpx; grid-column-gap:{{gapRow}}rpx;grid-template-columns:repeat(auto-fit, {{multipleSize}}rpx);">
1+
<wxs src="index.wxs" module="album"></wxs>
2+
<view class="container l-class" style="{{album.containerStyle(urls, multipleSize, gapRow, gapColumn)}}">
33
<block wx:for="{{urls}}" wx:key="index">
4-
<image id='{{index}}' bind:tap="onPreviewTap" class="{{urls.length == 1?horizontal_screen?'l-single-image-class':'vertical l-single-image-class':'l-multi-image-class'}}" style="{{urls.length == 1?horizontal_screen?'height:'+shortSideValue+'rpx;width:'+singleSize+'rpx;':'width:'+shortSideValue+'rpx;height:'+singleSize+'rpx;':'height:'+multipleSize+'rpx;width:'+multipleSize+'rpx;'}}" src="{{newOrOld=='old'?item:item.url}}" mode="{{urls.length == 1?singleMode:multipleMode}}" />
4+
<image id='{{index}}' bind:tap="onPreviewTap" class="{{album.blockClass(urls, horizontalScreen)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length == 1?singleMode:multipleMode}}" />
55
</block>
66
</view>

‎dist/album/index.wxs‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var containerStyle = function (urls, multipleSize, gapRow, gapColumn) {
2+
urls.length == 2 || urls.length == 4 ? 'width:' + (2 * multipleSize + gapRow) + 'rpx;' : 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx;'
3+
if (urls.length == 2 || urls.length == 4) {
4+
return 'width:' + (2 * multipleSize + gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
5+
} else {
6+
return 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
7+
}
8+
9+
}
10+
11+
var blockClass = function (urls, horizontalScreen) {
12+
if (urls.length == 1) {
13+
if (horizontalScreen) {
14+
return 'l-single-image-class'
15+
} else {
16+
return 'vertical l-single-image-class'
17+
}
18+
} else {
19+
return 'l-multi-image-class'
20+
}
21+
}
22+
23+
var blockStyle = function (urls, horizontalScreen, shortSideValue, singleSize, multipleSize) {
24+
if (urls.length == 1) {
25+
if (horizontalScreen) {
26+
return 'height:' + shortSideValue + 'rpx;width:' + singleSize + 'rpx;'
27+
} else {
28+
return 'width:' + shortSideValue + 'rpx;height:' + singleSize + 'rpx;'
29+
}
30+
} else {
31+
return 'height:' + multipleSize + 'rpx;width:' + multipleSize + 'rpx;'
32+
}
33+
}
34+
35+
module.exports = {
36+
containerStyle: containerStyle,
37+
blockClass: blockClass,
38+
blockStyle: blockStyle
39+
}

‎examples/dist/album/index.js‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ Component({
4040
multipleMode: {
4141
type: String,
4242
value: 'aspectFill',
43+
},
44+
key: {
45+
type: String,
46+
value: 'url'
4347
}
4448
},
4549

@@ -48,28 +52,32 @@ Component({
4852
*/
4953
data: {
5054
// 传值方式是新方式还是旧方式
51-
newOrOld: null,
55+
newType: true,
5256
// 单图短边大小
5357
shortSideValue: 0,
58+
// 图片排列几行
59+
row: 0,
60+
// 图片排列几列
61+
colum: 0,
5462
},
5563

5664
/**
5765
* 组件的生命周期
5866
*/
5967
lifetimes: {
60-
attached: function () {
68+
attached() {
6169
// 在组件实例进入页面节点树时执行
6270

6371
//判断传入urls长度
6472
if (this.data.urls.length > 9) {
65-
const urls = this.data.urls.slice(0, 9);
73+
const urls = this.data.urls.slice(0, 9)
6674
this.setData({
6775
urls
68-
});
76+
})
6977
console.warn('超过9张图片！');
7078
}
7179

72-
this.preview();
80+
this.preview()
7381

7482
},
7583
},
@@ -79,29 +87,27 @@ Component({
7987
*/
8088
methods: {
8189
// 判断传入的urls是字符串列表(old模式)还是对象列表(new模式)
82-
judgeNewOrOld: function () {
90+
judgeType() {
8391
const urls = this.data.urls;
8492
if (urls.length != 0) {
85-
if (typeof (urls[0]) != 'object') {
86-
return 'old';
93+
if (typeof (urls[0]) !== 'object') {
94+
return false;
8795
}
88-
return 'new';
8996
}
90-
return 'new';
97+
return true;
9198
},
9299

93100
//判断照片是横屏还是竖屏并计算短边的长度
94101
//如不指定短边的长度，短边会默认显示image组件的长度
95102
horizontalOrVertical: function (src) {
96-
let that = this;
97103
wx.getImageInfo({
98104
src: src,
99-
success(res) {
105+
success: (res) => {
100106
const longSide = res.width >= res.height ? res.width : res.height;
101107
const shortSide = res.width >= res.height ? res.height : res.width;
102-
that.setData({
103-
horizontal_screen: res.width >= res.height ? true : false,
104-
shortSideValue: shortSide * that.data.singleSize / longSide
108+
this.setData({
109+
horizontalScreen: res.width >= res.height ? true : false,
110+
shortSideValue: shortSide * this.data.singleSize / longSide
105111
});
106112
}
107113
});
@@ -110,16 +116,16 @@ Component({
110116
// 显示图片
111117
preview: function () {
112118
// 判断传入模式
113-
const newOrOld = this.judgeNewOrOld();
119+
const newType = this.judgeType();
114120
this.setData({
115-
newOrOld
121+
newType
116122
});
117-
118123
//显示图片
119124
const urls = this.data.urls;
125+
const key = this.data.key
120126

121127
if (urls.length == 1) {
122-
this.horizontalOrVertical(newOrOld == 'new' ? urls[0].url : urls[0]);
128+
this.horizontalOrVertical(newType ? urls[0][key] : urls[0]);
123129
}
124130
},
125131

@@ -128,17 +134,17 @@ Component({
128134
const urls = this.data.urls;
129135
let tempFilePath = '';
130136
let previewImageList = [];
131-
const newOrOld = this.data.newOrOld;
137+
const newType = this.data.newType;
138+
const key = this.data.key
132139

133-
if (newOrOld == 'old') {
134-
tempFilePath = urls[index];
135-
previewImageList = urls;
136-
137-
} else {
138-
tempFilePath = urls[index].url;
140+
if (newType) {
141+
tempFilePath = urls[index][key];
139142
for (let i = 0; i < urls.length; i++) {
140-
previewImageList.push(urls[i].url);
143+
previewImageList.push(urls[i][key]);
141144
}
145+
} else {
146+
tempFilePath = urls[index];
147+
previewImageList = urls;
142148
}
143149

144150
let detail = {

‎examples/dist/album/index.wxml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<!-- miniprogram_npm/lin-ui/picture-album/index.wxml -->
2-
<view class="container l-class" style="{{urls.length == 2 || urls.length == 4?'width:'+(2*multipleSize+gapRow)+'rpx;':'width:'+(3*multipleSize+ 2 *gapRow)+'rpx;'}} grid-row-gap:{{gapColumn}}rpx; grid-column-gap:{{gapRow}}rpx;grid-template-columns:repeat(auto-fit, {{multipleSize}}rpx);">
1+
<wxs src="index.wxs" module="album"></wxs>
2+
<view class="container l-class" style="{{album.containerStyle(urls, multipleSize, gapRow, gapColumn)}}">
33
<block wx:for="{{urls}}" wx:key="index">
4-
<image id='{{index}}' bind:tap="onPreviewTap" class="{{urls.length == 1?horizontal_screen?'l-single-image-class':'vertical l-single-image-class':'l-multi-image-class'}}" style="{{urls.length == 1?horizontal_screen?'height:'+shortSideValue+'rpx;width:'+singleSize+'rpx;':'width:'+shortSideValue+'rpx;height:'+singleSize+'rpx;':'height:'+multipleSize+'rpx;width:'+multipleSize+'rpx;'}}" src="{{newOrOld=='old'?item:item.url}}" mode="{{urls.length == 1?singleMode:multipleMode}}" />
4+
<image id='{{index}}' bind:tap="onPreviewTap" class="{{album.blockClass(urls, horizontalScreen)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length == 1?singleMode:multipleMode}}" />
55
</block>
66
</view>

‎examples/dist/album/index.wxs‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var containerStyle = function (urls, multipleSize, gapRow, gapColumn) {
2+
urls.length == 2 || urls.length == 4 ? 'width:' + (2 * multipleSize + gapRow) + 'rpx;' : 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx;'
3+
if (urls.length == 2 || urls.length == 4) {
4+
return 'width:' + (2 * multipleSize + gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
5+
} else {
6+
return 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
7+
}
8+
9+
}
10+
11+
var blockClass = function (urls, horizontalScreen) {
12+
if (urls.length == 1) {
13+
if (horizontalScreen) {
14+
return 'l-single-image-class'
15+
} else {
16+
return 'vertical l-single-image-class'
17+
}
18+
} else {
19+
return 'l-multi-image-class'
20+
}
21+
}
22+
23+
var blockStyle = function (urls, horizontalScreen, shortSideValue, singleSize, multipleSize) {
24+
if (urls.length == 1) {
25+
if (horizontalScreen) {
26+
return 'height:' + shortSideValue + 'rpx;width:' + singleSize + 'rpx;'
27+
} else {
28+
return 'width:' + shortSideValue + 'rpx;height:' + singleSize + 'rpx;'
29+
}
30+
} else {
31+
return 'height:' + multipleSize + 'rpx;width:' + multipleSize + 'rpx;'
32+
}
33+
}
34+
35+
module.exports = {
36+
containerStyle: containerStyle,
37+
blockClass: blockClass,
38+
blockStyle: blockStyle
39+
}

‎examples/pages/components/layout/pages/album/index.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,17 @@ Page({
88
urls1_1: ['http://img2.imgtn.bdimg.com/it/u=1944156091,814818697&fm=26&gp=0.jpg'],
99
urls1_2: ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575390421137&di=3ba6f1c3b893af11a8cf7a32455d011c&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fee327b05d345a246d773b4b73df51c408f11112615d8e-5luZ3f_fw658'],
1010
urls5: ['http://img2.imgtn.bdimg.com/it/u=1944156091,814818697&fm=26&gp=0.jpg', 'http://pic1.win4000.com/wallpaper/2/596470aa0a9d3.jpg', 'http://pic1.win4000.com/wallpaper/2018-02-02/5a741b536cf04.jpg', 'http://image.naic.org.cn/uploadfile/2017/1011/1507715213116632.jpg', 'http://e0.ifengimg.com/10/2019/0421/9FB69F78D3D83925878EF2CFFEFA435E3F0F5DED_size144_w1080_h608.jpeg'],
11-
urls4: ['http://img2.imgtn.bdimg.com/it/u=1944156091,814818697&fm=26&gp=0.jpg', 'http://pic1.win4000.com/wallpaper/2/596470aa0a9d3.jpg', 'http://pic1.win4000.com/wallpaper/2018-02-02/5a741b536cf04.jpg', 'http://image.naic.org.cn/uploadfile/2017/1011/1507715213116632.jpg', ],
12-
11+
urls4: [{
12+
newurl: 'http://img2.imgtn.bdimg.com/it/u=1944156091,814818697&fm=26&gp=0.jpg',
13+
index: 0
14+
}, {
15+
newurl: 'http://pic1.win4000.com/wallpaper/2/596470aa0a9d3.jpg'
16+
}, {
17+
newurl: 'http://img2.imgtn.bdimg.com/it/u=1944156091,814818697&fm=26&gp=0.jpg',
18+
index: 0
19+
}, {
20+
newurl: 'http://pic1.win4000.com/wallpaper/2/596470aa0a9d3.jpg'
21+
}]
1322
},
1423

1524
/**

0 commit comments

Comments
 (0)